three.js

Three.js Ellipse

由 天大地大妈咪最大 提交于 2021-02-08 15:41:08
问题 How does one go about creating an ellipse in three.js? I've looked at this: Drawing an ellipse in THREE.js But it would be cool if someone could provide a working example. I've tried this: ellipse = new THREE.EllipseCurve(0,0,200,400,45,45,10); but that's not working for me. I have no idea what the parameters mean so I'm just blindly going about it. edit: I am getting the error "defined is not a function" when I try to create an ellipse curve. edit2: Figured out I had to include Curves.js for

How to animate camera.zoom in three.js with

由 青春壹個敷衍的年華 提交于 2021-02-08 11:13:05
问题 How to animate the zoom of camera in three.js with orthigraphic camera. Without animation it is very simple. I only have to set camera.zoom = 1 . But I want to animate it with tween.js. There is my codePen: http://codepen.io/anon/pen/yVOOLj?editors=1111 var scene = new THREE.Scene(); var camera = new THREE.OrthographicCamera(640 / -2, 640 / 2, 380 / 2, 380 / -2, -5000, 5000); camera.position.set(100,100,100); camera.zoom = 0.1; var renderer = new THREE.WebGLRenderer(); renderer.setSize( 640,

three.js texture across InstanceGeometry

由 让人想犯罪 __ 提交于 2021-02-08 10:28:58
问题 I'm using InstanceGeometry to render thousands of base geometries (boxes) in a scene. It's efficient and uses only 1 material/texture, but repeats the image texture for every instance. I'm trying to figure out how to have the texture spread out over x number of instances. Say for example there's 8 box instances, I'd like to 1/8 of the texture to appear on every box. I think the transformUV function on THREE.Texture is what I'd want to use, but I'm not sure how to use it in this context. OR,

Support for Farsi/Arabic texts in Three.js

由 不想你离开。 提交于 2021-02-08 09:01:09
问题 I need to show some text in Persian/Arabic language. I loaded a font including characters and I used TextGeometry to create a text on the scene: var loader = new THREE.FontLoader(); loader.load('B Zar_Regular.js', function (font) { var textGeo = new THREE.TextGeometry('سلام!', { font: font, size: 1, height: 0.05, curveSegments: 12, }); var material = new THREE.MeshNormalMaterial(); var textMesh = new THREE.Mesh(textGeo, material); textMesh.position.x = 15; scene.add(textMesh); }); I was

Support for Farsi/Arabic texts in Three.js

由 馋奶兔 提交于 2021-02-08 09:01:06
问题 I need to show some text in Persian/Arabic language. I loaded a font including characters and I used TextGeometry to create a text on the scene: var loader = new THREE.FontLoader(); loader.load('B Zar_Regular.js', function (font) { var textGeo = new THREE.TextGeometry('سلام!', { font: font, size: 1, height: 0.05, curveSegments: 12, }); var material = new THREE.MeshNormalMaterial(); var textMesh = new THREE.Mesh(textGeo, material); textMesh.position.x = 15; scene.add(textMesh); }); I was

Rotate camera X on local axis using Three.js

由 落爺英雄遲暮 提交于 2021-02-08 08:48:18
问题 I'm new to Three.js and fairly new to 3d space engines and what I'm trying to achieve is a 360 equirectangular image viewer. What my script does so far is to create a camera at 0,0,0 and a sphere mesh at the same location with normals inverted and an emission map of my 360 image. Representation of scene using Blender's viewport. The user should be enabled to rotate the camera using mouse drag or keyboard arrows, so using mouse listeners I created the drag feature which calculates the amount

THREE.js How to rotate CSS2D Text Labels

由 蓝咒 提交于 2021-02-08 05:34:46
问题 I am using CSS2D to display text labels as in the official example and it works OK. Now I want to perform a one-off rotation of some of the labels in the viewing plane. I have tried applying a CSS transform to the div before making a CSS2DObject out of the div. But it doesnt seem to be working (the labels are still horizontal). Here is my code (for a single label):- var myDiv = document.createElement( 'div' ); myDiv.className = className; myDiv.textContent = labelStr; myDiv.style.marginTop =

推荐几本对于学习WebGL有帮助的书籍

由 血红的双手。 提交于 2021-02-08 05:16:09
本人是今年准备毕业的大四学生，算是快进入社会的编程小白一枚，大学期间自己在网上搜集资料自学完了有关于WebGL的相关基础课程，现在在这里分享一下我学习用到的书籍，希望帮助到许多想学但又不知道如何下手的人，大家一起进步。 1.首先对于有一定javascript基础的人可以看 《[JavaScript权威指南(第六版)].(美)David.Flanagan》 ，写的很细，而且不是很难。熟读之后自己的能力会有很大的提高，没有一定基础的话可以去w3cschol了解相关知识，再回头来看这本书。 2.有 一定基础 且消除了对于js的 陌生感 之后，就可以开始WebGL的学习了。首先因为WebGL本身是有一定难度的，所以学习过程中一定要静下心，我推荐的书籍是 《WebGL编程指南.》 ，这本书比较详细的讲述了相关的运行原理，对打基础很有帮助。但就像前面说的，WebGL本身具有一定难度，所以在阅读本书时难免会感觉很吃力，有些部分学习起来感觉很生硬，这都是正常的，遇到不懂得点可以上网多查查，不要着急。 3.在自己有一定把握之后，就可以开始接下来的学习。 《THREE.JS开发指南》 ,这本书会教你如何搭建相关场景，当你熟读之后就可以做出自己喜欢的场景了。 注 ：当初有一段时间我觉得WebGL很难，陷入瓶颈，就在网上翻大佬们的贴，看到有人说学习WebGL最好先了解OpenGL之后在学

Moving cannonJS object in 3D according to its quaternion

由 微笑、不失礼 提交于 2021-02-08 03:51:23
问题 I would like to achieve a space ship like move on a cannonJS body. (Im really a beginner) I found some examples but none of them are exactly what I'm looking for. As i know the correct way to move an object, is to change its velocity. Here's what I have done here: http://codepen.io/Tomo0613/pen/xVjqqK enter code here But i definitely have problems with understanding quaternions. Is there a way to update, the vector of the body according to its quaternion as i rotate it, or that's always

Moving cannonJS object in 3D according to its quaternion

由 岁酱吖の 提交于 2021-02-08 03:50:44
问题 I would like to achieve a space ship like move on a cannonJS body. (Im really a beginner) I found some examples but none of them are exactly what I'm looking for. As i know the correct way to move an object, is to change its velocity. Here's what I have done here: http://codepen.io/Tomo0613/pen/xVjqqK enter code here But i definitely have problems with understanding quaternions. Is there a way to update, the vector of the body according to its quaternion as i rotate it, or that's always
订阅 three.js