[three.js]搭建场景

背景

虽然一直在从事three.js方面的开发工作，但是都是在同事搭建好的场景下工作的。最近接手的任务让我可以从0到1搭建一个场景，顺便复习一下

搭建三维场景

<script lang="ts" setup>
import { ref, onMounted } from 'vue';                                      
import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
// 导入 DRACOLoader
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js';
import { KTX2Loader } from 'three/examples/jsm/loaders/KTX2Loader.js';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { CSS3DRenderer, CSS3DObject } from 'three/examples/jsm/renderers/CSS3DRenderer.js';onMounted(() => {createScene();
});let scene: any, camera: any, renderer: any, controls: any;                                               
let css3dRenderer: any;function createScene() {//场景scene = new THREE.Scene();//辅助观察的坐标系const axesHelper = new THREE.AxesHelper(100);scene.add(axesHelper);//光源设置const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);directionalLight.position.set(100, 60, 50);scene.add(directionalLight);const ambient = new THREE.AmbientLight(0xffffff, 0.4);scene.add(ambient);//渲染器和相机let renderCanvas = document.getElementById('renderCanvas');const width = renderCanvas.offsetWidth;const height = renderCanvas.offsetHeight; camera = new THREE.PerspectiveCamera(30, width / height, 1, 3000); // camera.position.set(292, 223, 185);camera.position.set(200, 250, 410); //根据渲染范围尺寸数量级设置相机位置// camera.lookAt(0, -23, 41);renderer = new THREE.WebGLRenderer();renderer.setSize(width, height);renderCanvas.appendChild(renderer.domElement);// 设置相机控件轨道控制器OrbitControlscontrols = new OrbitControls(camera, renderer.domElement);controls.target.set(0, -23, 41);// 加载模型const loader = new GLTFLoader();loader.setDRACOLoader(new DRACOLoader().setDecoderPath('/js/draco/')) .setKTX2Loader(new KTX2Loader().setTranscoderPath('/js/basis/').detectSupport(renderer as THREE.WebGLRenderer)); loader.load('./三维图.glb', (gltf: any) => { scene.add(gltf.scene);});// 加入文字标签const textLabel = tag3D('1组');css3dRenderer = labelRenderer(renderCanvas);scene.add(textLabel);render();
}// 渲染循环
function render() {renderer.render(scene, camera); //执行渲染操作css3dRenderer.render(scene, camera);controls.update();// console.log('camera.position: ', camera.position); // console.log('controls.target: ', controls.target); // mesh.rotateY(0.01); //每次绕y轴旋转0.01弧度requestAnimationFrame(render); //请求再次执行渲染函数render，渲染下一帧
}// 创建一个HTML标签
function tag3D(name) {// 创建div元素(作为标签)let div = document.createElement('div');div.innerHTML = name;div.classList.add('tag');//div元素包装为CSS3模型对象CSS3DObjectvar label = new CSS3DObject(div);div.style.pointerEvents = 'none'; //避免HTML标签遮挡三维场景的鼠标事件// 设置HTML元素标签在three.js世界坐标中位置label.position.set(0, 0, 50);//缩放CSS3DObject模型对象label.scale.set(0.04, 0.04, 0.04); //根据相机渲染范围控制HTML 3D标签尺寸// label.rotateY(Math.PI / 2); //控制HTML标签CSS3对象姿态角度label.rotateX(-Math.PI / 2);return label; //返回CSS3模型标签
}// 创建一个CSS2渲染器CSS2DRenderer
function labelRenderer(container) {var labelRenderer = new CSS3DRenderer();labelRenderer.setSize(container.offsetWidth, container.offsetHeight);labelRenderer.domElement.style.position = 'absolute';// 相对标签原位置位置偏移大小labelRenderer.domElement.style.top = '0px';labelRenderer.domElement.style.left = '0px';// //设置.pointerEvents=none，以免模型标签HTML元素遮挡鼠标选择场景模型labelRenderer.domElement.style.pointerEvents = 'none';container.appendChild(labelRenderer.domElement);return labelRenderer;
}
</script>
<template><div id="renderCanvas" class="renderCanvas"></div>
</template>

注意点

一定要有renderer.render(scene, camera);否则屏幕上啥也看不见；加了CSS3DRenderer，也要有相应的css3dRenderer.render(scene, camera);

如果有OrbitControls，相机就不用设置lookAt，直接设置OrbitControls的target就行了

GLTFLoader也不是上来就能load的，需要加上下面的东西才能load，原因我暂时也没弄清楚

loader.setDRACOLoader(new DRACOLoader().setDecoderPath('/js/draco/'))  .setKTX2Loader(new KTX2Loader().setTranscoderPath('/js/basis/').detectSupport(renderer as THREE.WebGLRenderer));