【无标题】Threejs第一个3D场景

第一步得安装和引入Threejs创建实列对象

创建3D场景对象
javascript 复制代码
import * as THREE from 'three';
const scene = new THREE.Scene(); // 创建实列对象

创建几何形状

javascript 复制代码

const geometry = new THREE.BoxGeometry(100, 100, 100); // 立方体
const geometry = new THREE.CapsuleGeometry( 1, 1, 4, 8 );  // 胶囊图形类
const geometry = new THREE.CircleGeometry( 5, 32 ); // 圆片
const geometry = new THREE.CircleGeometry( 5, 32 );  // 圆锥
const geometry = new THREE.CylinderGeometry( 5, 5, 20, 32 ); // 圆柱

const verticesOfCube = [
    -1,-1,-1,    1,-1,-1,    1, 1,-1,    -1, 1,-1,
    -1,-1, 1,    1,-1, 1,    1, 1, 1,    -1, 1, 1,
];

const indicesOfFaces = [
    2,1,0,    0,3,2,
    0,4,7,    7,3,0,
    0,1,5,    5,4,0,
    1,2,6,    6,5,1,
    2,3,7,    7,6,2,
    4,5,6,    6,7,4
];

const geometry = new THREE.PolyhedronGeometry( verticesOfCube, indicesOfFaces, 6, 2 );   //多面几何体
 //
const geometry = new THREE.TorusKnotGeometry( 10, 3, 100, 16 ); //圆环缓冲扭结几何体

const geometry = new THREE.TorusGeometry( 10, 3, 16, 100 ); //圆环几何体

const geometry = new THREE.SphereGeometry( 15, 32, 16 );  // 球体

const geometry = new THREE.PlaneGeometry( 1, 1 ); // 平面几何体

这些都是基本上常用的形体
创建材质

javascript 复制代码

//材质对象Material
// 基础网格材质MeshBasicMaterial不受光照影响
// 漫反射网格材质；MeshLambertMaterial
const material = new THREE.MeshLambertMaterial({
    color: 0x00ffff, //设置材质颜色
});

这里的常用参数：color， side，transparent，opacity ...

这块color是十六进制字符串传递，默认情况下为 0xffffff（白色）

javascript 复制代码

const mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
//设置网格模型在三维空间中的位置坐标，默认是坐标原点
mesh.position.set(0,10,0);
scene.add(mesh); //网格模

网格模型

javascript 复制代码

const mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
//设置网格模型在三维空间中的位置坐标，默认是坐标原点
mesh.position.set(0,10,0);
scene.add(mesh); //网格模

相机

javascript 复制代码

/**
 * 透视投影相机设置
 */
// 30:视场角度, width / height:Canvas画布宽高比, 1:近裁截面, 3000：远裁截面
const camera = new THREE.PerspectiveCamera(30, width / height, 1, 3000);
camera.position.set(292, 223, 185); //相机在Three.js三维坐标系中的位置
camera.lookAt(0, 0, 0); //相机观察目标指向Three.js坐标系原点

创建渲染器对象

javascript 复制代码

/**
 * 创建渲染器对象
 */
const renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height); //设置three.js渲染区域的尺寸(像素px)
renderer.render(scene, camera); //执行渲染操作
//three.js执行渲染命令会输出一个canvas画布，也就是一个HTML元素，你可以插入到web页面中
document.body.appendChild(renderer.domElement);

html

javascript 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Threejs中文网:www.webgl3d.cn</title>
</head>

<body>
 
    <script type="importmap">
        {
			"imports": {
				"three": "../../../three.js/build/three.module.js"
			}
		}
	</script>
    <script src="./index.js" type="module">  
    </script>
</body>

</html>