three.js

How to get objects to rotate on a vertical axis and around another object three.js

由 被刻印的时光 ゝ 提交于 2021-01-27 23:05:16
问题 you probably noticed me asking quite a few questions related to my project so thank you in advance for all the support. My project consists of a planet earth and moon that rotate around the sun. (They aren't specifically rotating around the sun, it's more just around the 0,0 axis where the sun happens to be). I initially created my geometries and then added them into the scene and then into the orbit group as follows var orbitGroup = new THREE.Object3D(); scene.add(orbitGroup); scene.add

Having numerous Reflectors in a scene: How to implement a clone() function?

由 坚强是说给别人听的谎言 提交于 2021-01-27 18:01:22
问题 I need about 80 (moving) reflecting ShapeBufferGeometry in a scene and i want them to share as much material data as possible. Apparently, the clone() method doesn't work with Reflector . I get black geometries that don't reflect anything. Tried to add a clone() method to the prototype as below, resulting in no visible result at all: // Clone function for Reflector Reflector.prototype.clone = function() { return new Reflector( this.geometry, this.options ); } How would this work? Can share a

WebGL z-buffer artifacts?

由 会有一股神秘感。 提交于 2021-01-27 17:31:26
问题 We are working on a Three.js based WebGL project, and have trouble understanding how transparency is handled in WebGL. The image shows a doublesided surface drawn with alpha = 0.7, which behaves correctly on its right side. However closer to the middle strange artifacts appear, and on the left side the transparency does not seem to work at all. http://emilaxelsson.se/sandbox/vis1/alpha.png The problem can also be seen here: http://emilaxelsson.se/sandbox/vis1/ Has anyone seen anything similar

AFrame: reparenting an element keeping its world position, rotation

由 柔情痞子 提交于 2021-01-24 09:34:20
问题 I'm trying to reparent an element (entity), keeping its position, rotation (and if possible, size, eg, scale) in the scene. Ideally, I would like to have a component (say "reparent") that when set on an entity, "moves" it to the specified parent, keeping the aspect of the entity in the scene. For example, for the next HTML code, the green entity would become a child of the red one, but would keep its position and rotation in the scene: <a-scene id="scene" background="color: grey"> <a-entity

three.js中的文字

由 坚强是说给别人听的谎言 提交于 2021-01-23 10:59:53
1.三维文字 　　 三维字体文字，使用的是 FontLoader ，字体文件通过来 facetype.js 生成 addCityText: function () { var self = this ; var citys = self.citys[self.mapname]; var group = new THREE.Group(); group.name = "cityname" ; // 载入字体 var loader = new THREE.FontLoader(); loader.load( "../assets/fonts/FZLanTingHeiS-UL-GB_Regular.json", function (font) { // 创建文字 for (city of citys) { var textGeo = new THREE.TextGeometry(city.name, { font: font, size: 1.4 , height: 0.6 , weight: 'bold' , }); var txtMater = new THREE.MeshBasicMaterial({ color: 0xffffff }); var textMesh = new THREE.Mesh(textGeo, txtMater); textMesh.name =

sdf 渲染文字在three.js中

由 早过忘川 提交于 2021-01-23 09:07:18
sdf 渲染文字在three.js中 最终效果: 上面是 SDF文字贴图,下面是在webgl中渲染。 实现 使用 tiny-sdf 制作sdf文字贴图。 在场景中渲染,核心类: /** * 生成SDF标签 */ class LabelSDF { constructor ( { height , content } ) { const bufferF = 8 ; // 影响生成文字图片的分辨率 const fontSize = 256 ; const fontWidth = fontSize + ( fontSize / bufferF ) * 2 ; const width = height * content . length ; this . textInfo = this . getSDF ( content , fontSize , bufferF , fontWidth ) ; const geo = this . getGeo ( width , height , fontWidth , this . textInfo , content ) ; const mat = this . getMat ( this . textInfo ) ; const mesh = new THREE . Mesh ( geo , mat ) ; this . mesh =

Three.js - Fisheye effect

由 回眸只為那壹抹淺笑 提交于 2021-01-20 16:20:16
问题 So, I've messed around with three.js, works out great. The only thing I can't figure out, is how to make a camera with a real fisheye effect. How is that possible? camera.setLens() ? 回答1: The fish eye effect can be achieved using Giliam de Carpentier's shader for lens distortion. Shader code: function getDistortionShaderDefinition() { return { uniforms: { "tDiffuse": { type: "t", value: null }, "strength": { type: "f", value: 0 }, "height": { type: "f", value: 1 }, "aspectRatio": { type: "f",

Three.js - Fisheye effect

由 会有一股神秘感。 提交于 2021-01-20 16:18:06
问题 So, I've messed around with three.js, works out great. The only thing I can't figure out, is how to make a camera with a real fisheye effect. How is that possible? camera.setLens() ? 回答1: The fish eye effect can be achieved using Giliam de Carpentier's shader for lens distortion. Shader code: function getDistortionShaderDefinition() { return { uniforms: { "tDiffuse": { type: "t", value: null }, "strength": { type: "f", value: 0 }, "height": { type: "f", value: 1 }, "aspectRatio": { type: "f",

How to display coordinate value on the top of a 3D cube three.js

由 倾然丶 夕夏残阳落幕 提交于 2021-01-07 06:31:37
问题 I am developing a 3D cube with three.js that rotates and translates continously. The 3D cube is rotated using random generated numbers for now (Ultimately the numbers will be coming from an accelerometer and gyroscope). Below is the HTML code: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" type="css" href="style.css"> <script src="https://threejs.org/build/three.min.js"></script> <script src= "https://threejs.org/examples/js/controls/OrbitControls.js"></script>

pixi.js + three.js

由 对着背影说爱祢 提交于 2021-01-05 12:15:36
three.js 最好的webgl 3d渲染库之一, pixi.js　 最好的webgl 2d渲染库之一,也许可以把之一去掉 两个库都很精简,如果把两个库结合起来，一定很爽很爽，你说是吧！ 跳一跳three.js开发的。 欢乐球球three.js+pixi.js开发的. three.js, pixi.js都是javascript开发的，方便javascript爱好者。 three.js, pixi.js开发微信小游戏的话,适配很简单. 基本上可以这么说,three.js做2dui很麻烦，绝大多数是three.js开发 3d, pixi.js开发2d. 怎么做呢? 假设pixi.js的渲染器为renderer2D three.js的渲染器为renderer3D renderer2D.reset() renderer3D.state.reset(); // 处理3d场景 renderer3D.setRenderTarget(null); renderer3D.render(scene, camera, renderTarget); renderer2D.reset() // 处理2d变化 renderer2D.render(stage); // 核心的逻辑 renderer3D.state.reset(); renderer3D.setRenderTarget(null); //<-
订阅 three.js