持续创作,加速成长!这是我参与「掘金日新计划 · 10 月更文挑战」的第9天,点击查看活动详情
写在前面
本文用vue+threejs写物体事件:双击事件,监听双击物体的事件,双击物体后物体改变为随机的颜色。
下面是演示gif:
代码说明
- html
一个id容器,用来插入threejs渲染器节点
<template>
<div class="item">
<div id="THREE62"></div>
</div>
</template>
- 引入threejs
OrbitControls:轨道控制器,用来鼠标控制界面
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
- mounted方法
vue生命周期,在此方法中调用initThreejs方法
mounted() {
this.initThreejs();
},
- initThreejs完整代码及大致思路说明
- 定义相机
camera
、场景scene
、渲染器renderer
,定义用于光线投射的变量raycaster
,响应光线投射的数组objects
- 创建场景
new THREE.Scene()
,创建一个白色的平行光new THREE.DirectionalLight(0xffffff)
,创建一个透视相机new THREE.PerspectiveCamera
,创建场景渲染器new THREE.WebGLRenderer({ antialias: true })
,光线投射new THREE.Raycaster()
,创建轨道控制器new OrbitControls(camera, renderer.domElement)
,参数为控制的相机和场景渲染器节点 - 创建地面,是一个长方体形状,高光材质的网格模型
- 创建2个立方体模型,一个红色,一个绿色
- 添加双击事件监听
document.addEventListener("dblclick", onMousedblclick);
- 通过
intersect.object.material.color.set()
方法,为光线投射中的物体改变为随机的RGB颜色 - 最后渲染一下场景
renderer.render(scene, camera);
initThreejs() {
let camera, scene, renderer;
let raycaster, // 光线投射,用于鼠标拾取,返回鼠标在的位置的物体
pointer, // 二维向量,用于存放鼠标位置
objects = []; // 用于存放响应鼠标拾取的对象
init();
function init() {
// 创建场景
scene = new THREE.Scene();
scene.background = new THREE.Color(0x000000); // 设置场景背景颜色
// 创建灯光
const light = new THREE.DirectionalLight(0xffffff); // 平行光
light.position.set(0.5, 1.0, 0.5).normalize(); // 设置平行光的方向,从(0.5, 1.0, 0.5)->target一般(0, 0, 0)
scene.add(light); // 将灯光添加到场景中
// 创建相机
camera = new THREE.PerspectiveCamera(
35,
(window.innerWidth - 201) / window.innerHeight,
1,
500
); // 透视相机
camera.position.x = 36;
camera.position.y = 67; // 设置相机的位置
camera.position.z = 67;
scene.add(camera); // 将相机添加到场景中
// 创建渲染器
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.outputEncoding = THREE.sRGBEncoding;
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth - 201, window.innerHeight);
document.getElementById("THREE62").appendChild(renderer.domElement);
// 光线投射用于进行鼠标拾取(在三维空间中计算出鼠标移过了什么物体),返回值就是鼠标在的物体的集合
raycaster = new THREE.Raycaster();
pointer = new THREE.Vector2(); // 定义一个二维向量
document.addEventListener("dblclick", onMousedblclick);
// 创建轨道控制器
const controls = new OrbitControls(camera, renderer.domElement);
controls.addEventListener("change", render);
controls.update();
// 创建地面
const ground = new THREE.Mesh(
new THREE.BoxGeometry(50, 0.15, 50),
new THREE.MeshPhongMaterial({
color: 0x999999,
depthWrite: false,
transparent: true,
opacity: 1,
})
);
ground.receiveShadow = true;
scene.add(ground);
// 创建红色立方体
let redMesh = new THREE.Mesh(
new THREE.BoxGeometry(2, 2, 2),
new THREE.MeshBasicMaterial({ color: 0xff0000 })
); // 网格模型
redMesh.position.y = 1;
scene.add(redMesh); // 将这个立方体添加到场景中
// 创建绿色立方体
let greenMesh = new THREE.Mesh(
new THREE.BoxGeometry(2, 2, 2),
new THREE.MeshBasicMaterial({ color: 0x00ff00 })
); // 网格模型
greenMesh.position.y = 1;
greenMesh.position.x = 5;
scene.add(greenMesh); // 将这个立方体添加到场景中
objects.push(redMesh, greenMesh);
render();
}
function onMousedblclick(event) {
pointer.set(
(event.offsetX / (window.innerWidth - 201)) * 2 - 1,
-(event.offsetY / window.innerHeight) * 2 + 1
); // 将鼠标位置归一化为设备坐标 x 和 y 方向的取值范围是 (-1 to +1)
raycaster.setFromCamera(pointer, camera); // 通过相机和鼠标位置更新射线
const intersects = raycaster.intersectObjects(objects, false); // 获取光线投射的对象
if (intersects.length > 0) {
const intersect = intersects[0];
intersect.object.material.color.set(
`rgb(${parseInt(Math.random() * 255)}, ${parseInt(
Math.random() * 255
)},${parseInt(Math.random() * 255)})`
); // 改变为随机的颜色
}
render();
}
function render() {
renderer.render(scene, camera);
}
},
写在最后
以上就是所有的代码和说明。