背景
虽然一直在从事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);
// 设置相机控件轨道控制器OrbitControls
controls = 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模型对象CSS3DObject
var 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));
后记
刚学three.js的时候,按照教程也没遇到这么多问题,好久不写,问题一堆,感觉基础摇摇欲坠,所以特地记录一下
参考
参考1
参考2