three初学踩坑之路，渲染外部模型，添加事件

渲染场景

1.简单渲染一个盒子

// 引入three方式
import { Scene, ... } from 'three
// dom是我要渲染的元素
const height = dom.offsetHeight
const width = dom.offsetWidth
// 添加相机
const camera = new PerspectiveCamera( 45, width / height, 1, 10000 )
camera.position.z = 5;
const renderer = new WebGLRenderer();
renderer.setClearColor(0xcccccc, 1)
renderer.setSize( width, height )
const scene = new Scene();
const geometry = new BoxGeometry();
const material = new MeshBasicMaterial( { color: 0x00ff00 } );
const cube = new Mesh( geometry, material );
scene.add(cube)
dom.appendChild(renderer.domElement);
renderer.render( scene, camera )

后面就想添加一个地平线网格，重点，后面添加之后一直是黑色，最后才知道是没有添加灯光
下面添加地平线和灯光

//添加地板割线
const grid = new GridHelper( 100, 50, 0x000000, 0x000000 );
grid.material.opacity = 0.2;
grid.material.transparent = true;
scene.add( grid );
// 添加灯光
scene.add(new AmbientLight(0x444444, 2));

const light = new DirectionalLight(0xffffff);
light.position.set(0, 20, 10 );

light.castShadow = true;
light.shadow.camera.top = 10;
light.shadow.camera.bottom = -10;
light.shadow.camera.left = -10;
light.shadow.camera.right = 10;

//告诉平行光需要开启阴影投射
light.castShadow = true;

scene.add(light);

现在是不是在页面只看到一根线，别着急，呢是因为没有调整相机的视角，设置下面配置

camera.position.set(0, 40, 50);

是不是就可以呈现了，想鼠标控制拖动需要添加控制器配置

//需要单独引入
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
function initControls() {
   const controls = new OrbitControls( camera, renderer.domElement );
   // 如果使用animate方法时，将此函数删除
   //controls.addEventListener( 'change', render );
   // 使动画循环使用时阻尼或自转 意思是否有惯性
   controls.enableDamping = true;
   //动态阻尼系数 就是鼠标拖拽旋转灵敏度
   //controls.dampingFactor = 0.25;
   //是否可以缩放
   controls.enableZoom = true;
   //是否自动旋转
   // controls.autoRotate = true;
   controls.autoRotateSpeed = 0.5;
   //设置相机距离原点的最远距离
   // controls.minDistance  = 1;
   //设置相机距离原点的最远距离
   controls.maxDistance  = 2000;
   //是否开启右键拖拽
   controls.enablePan = true;
 }

2.给盒子模型添加事件，点击变色

// 添加事件
const raycaster = new Raycaster()
dom.addEventListener('click', function (event) {
  console.log(dom)
  console.log(event, height, width)
  const { offsetX, offsetY } = event
  const x = ( offsetX / width ) * 2 - 1;
  const y = - ( offsetY / height ) * 2 + 1;
  const vector2 = new Vector2(x, y)
  raycaster.setFromCamera( vector2, camera );
  const intersencts = raycaster.intersectObjects([cube], true)
  console.log(intersencts)
  if (!intersencts.length) return
  cube.material.color.set(0xcccccc)
})

添加事件intersectObjects方法的第一个参数一定是一个数组
3.导入外部模型

// 导入外部模型
const loader = new GLTFLoader();
loader.load("source/3D/Soldier.glb", (geometry) => {
  console.log(geometry)
  scene.add(geometry.scene)
})

threejs还有很多属性，后期踩坑的路还很长…