javascript - Threejs添加标签

标签 javascript three.js

以下一些previous post on stackoverflow 我正在尝试在 Canvas 中添加标签。 我制作了第二个场景和第二个摄像机来重叠第一个场景上的标签。

this.sceneOrtho = new THREE.Scene();//for labels
this.scene = new THREE.Scene();// for Geometry

//camera for geometry
var SCREEN_WIDTH = window.innerWidth-5, SCREEN_HEIGHT = window.innerHeight-5;
var VIEW_ANGLE = 45, ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT, NEAR = 0.1, FAR = 20;
this.camera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR);
var r = 4, phi = Math.PI/4, theta = Math.PI/4;
this.camera.position.set(r*Math.cos(phi)*Math.sin(theta),r*Math.sin(phi), r*Math.cos(phi)*Math.cos(theta));
this.camera.lookAt(new THREE.Vector3(0, 0, 0));

// camera for labels
this.cameraOrtho = new THREE.OrthographicCamera( VIEW_ANGLE, ASPECT, NEAR, FAR );
this.cameraOrtho.position.z = 10;

我还在场景中添加了 THREE.Sprite 对象 sceneOrtho.add(spritey); 并呈现this.model.clearScene(this.scene); this.model.populateScene(this.scene,this.sceneOrtho);//<-------- this.renderer.clear(); this.renderer.render(this.scene, this.camera); this.renderer.clearDepth(); this.renderer.render( this.sceneOrtho, this.cameraOrtho );

但我只能看到几何形状,看不到标签。 这里有直播example单击按钮测试即可查看。

最佳答案

我猜场景渲染正确,但你的正交相机看向错误的方向。我没有看到为您的正交相机设置 lookAt

是的,正如 @weSTLangley 所写,这对其他人来说没有用。

关于javascript - Threejs添加标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29477589/

相关文章:

javascript - 移动对象 Three.js

javascript - 正交相机和使用光线转换选择对象

three.js - 如何在Three.JS中获取obj模型对象的顶点?

PHP(或 Javascript) float 标题开/关

javascript - 从毫秒获取日期

javascript - 为什么 Javascript Google Drive API 返回 'false' 作为响应?

javascript - 如何用cancelAnimationFrame停止旋转?

javascript - 存储使用javascript返回的json数据

javascript - create-react-app 总是抛出 babel 错误

javascript - ThreeJS 中带倒影的水