three.js - 使用 three.js 进行注释
问题描述
我有两个 .obj 文件的立方体。 obj 文件在浏览器上呈现。我想做的是当用户点击任何立方体或立方体上的任何地方时,会显示一个提示框,以在立方体上的那个地方添加注释。如何做到这一点?我是three.js的新手。任何人都可以帮助我吗?
这是我的代码 with.obj 文件
<!DOCTYPE html>
<html>
<head>
<title>Mouse Picking</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="three.js"></script>
<script src="Detector.js"></script>
<script src="OrbitControls.js"></script>
<script src="OBJLoader.js"></script>
<script src="MTLLoader.js"></script>
<script src="DragControls.js"></script>
<style>
body {
overflow: hidden;
margin: 0;
padding: 0;
background: hsl(0, 0%, 10%);
}
</style>
</head>
<body>
<script>
if (!Detector.webgl) {
Detector.addGetWebGLMessage();
}
var container;
var camera, controls, scene, renderer;
var lighting, ambient, keyLight, fillLight, backLight;
var BlueCube, RedCube;
var objects = [];
init();
animate();
function init() {
container = document.createElement('div');
document.body.appendChild(container);
/* Camera */
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.x = 5;
camera.position.y = 3;
camera.position.z = 7;
/* Scene */
scene = new THREE.Scene();
lighting = true;
ambient = new THREE.AmbientLight(0xffffff, 2.5);
scene.add(ambient);
keyLight = new THREE.DirectionalLight(new THREE.Color('hsl(30, 100%, 75%)'), 1.0);
keyLight.position.set(-100, 0, 100);
fillLight = new THREE.DirectionalLight(new THREE.Color('hsl(240, 100%, 75%)'), 0.75);
fillLight.position.set(100, 0, 100);
backLight = new THREE.DirectionalLight(0xffffff, 1.0);
backLight.position.set(100, 0, -100).normalize();
/* Model */
var mtlLoader = new THREE.MTLLoader();
mtlLoader.setBaseUrl('assets/');
mtlLoader.setPath('assets/');
mtlLoader.load('mouse_picking.mtl', function (materials) {
materials.preload();
var objLoader = new THREE.OBJLoader();
objLoader.setMaterials(materials);
objLoader.setPath('assets/');
objLoader.load('mouse_picking.obj', function (object) {
scene.add( object );
objects.push( object );
});
});
raycaster = new THREE.Raycaster();
mouse = new THREE.Vector2();
/* Renderer */
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(new THREE.Color("hsl(0, 0%, 10%)"));
container.appendChild(renderer.domElement);
/* Controls */
controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 0.25;
controls.enableZoom = false;
/* Events */
window.addEventListener('resize', onWindowResize, false);
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
function animate() {
//selected();
requestAnimationFrame(animate);
controls.update();
render();
}
function render() {
renderer.render(scene, camera);
}
</script>
</body>
</html>
解决方案
我建议您细分立方体网格的几何形状,然后使用光线投射来确定被点击的场景部分(特别是网格中的三角形)。然后你可以添加一个精灵对象,它是一个始终面向相机的平面,以显示一些文本。
有关更多信息,请查看http://stemkoski.github.io/Three.js/index.html上的示例集合- 它们有点过时,但示例“鼠标单击”和“Sprite 文本标签”可能会有所帮助你开始吧。
推荐阅读
- rxjs - 单个操作员是否必须安装管道
- c - 使用C中的双指针将二维数组放入现有内存
- javascript - Vue.js 未检测到窗口关闭
- ios - Xcode 10 - 使用 Swift 4.1.2 编译的模块不能被 Swift 4.2 编译器导入
- go - Go 客户端和“etcdctl”cli 实用工具似乎在不同的工作区上工作,即使它们连接到相同的主机
- reactjs - 当使用带有“no-any”的 Typescript 时,允许 props.children 是任何东西:真的吗?
- mysql - 如何删除表的所有外键
- xquery - 如何在 XQuery 中插入构造的 XML 节点?
- java - Java 8 基于一个属性比较 2 个列表
- visual-studio - WiX安装后我的exe文件双击不起作用,只能以管理员身份运行