第一步得安装和引入Threejs创建实列对象
创建3D场景对象
import * as THREE from 'three'; const scene = new THREE.Scene(); // 创建实列对象
创建几何形状
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 ); // 平面几何体这些都是基本上常用的形体
创建材质
//材质对象Material // 基础网格材质MeshBasicMaterial不受光照影响 // 漫反射网格材质；MeshLambertMaterial const material = new THREE.MeshLambertMaterial({color: 0x00ffff, //设置材质颜色 });这里的常用参数：color， side，transparent，opacity ...
这块color是十六进制字符串传递，默认情况下为 0xffffff（白色）
const mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
//设置网格模型在三维空间中的位置坐标，默认是坐标原点
mesh.position.set(0,10,0);
scene.add(mesh); //网格模网格模型
const mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh //设置网格模型在三维空间中的位置坐标，默认是坐标原点 mesh.position.set(0,10,0); scene.add(mesh); //网格模
相机
/*** 透视投影相机设置*/ // 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坐标系原点
创建渲染器对象
/*** 创建渲染器对象*/ 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
<!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>
