three.js

Emissive ligth and reflection in Three.js

由 孤人 提交于 2021-01-29 05:41:29
问题 I would like to do something pretty simple with three.js. I would like to create a cube on a "ground": the cube will emit blue light and I would like to see the reflection on the ground. I searched and find the meshLambertMaterial in the Three.js documentation, and it includes emissivity and reflectivity properties. So, I made my code like this: import * as THREE from '../lib/three.module.js'; // Set up const scene = new THREE.Scene(); const renderer = new THREE.WebGLRenderer(); renderer

Three.js rope / cable effect - animating thick lines

由 南楼画角 提交于 2021-01-29 05:20:31
问题 With Three.js I want to create the effect of an object swinging from a cable or rope. It doesn't require real physics as the "swinging" object simply follows a fixed animation. The easiest solution is using the THREE.Line, however the problem is that THREE.Line can only be 1px thick and looks kinda awful. In the three.js examples there is a "fat lines" example : https://threejs.org/examples/?q=lines#webgl_lines_fat however the problem is that once I have created the line using LineGeometry()

AFrame: how to use flat shading on a mesh

由 喜欢而已 提交于 2021-01-29 05:20:21
问题 The AFrame performance docs (https://github.com/aframevr/aframe/blob/master/docs/introduction/best-practices.md) recommend pre-baked lighting. I have done this, so now I'd like my mesh to use flat shading. However I'm unclear how to do this? <a-gltf-model src="..." material="shader: flat"> This has no effect. I also tried iterating the nodes in three.js and setting each material to flat, but that didn't work either. Complete code trying a bunch of things: <html> <head> <script src="https:/

Json 3D model only using 1 pixel of a texture

由 牧云@^-^@ 提交于 2021-01-29 05:10:58
问题 I'm having this weird issue, my 3D object is only taking 1 pixel (bottom left) of my texture, this is how i'm loading the object loaderFrame.load('./models/filterFrame/filterFrame.json',(geometry) => { const mat = new THREE.MeshBasicMaterial({ map: new THREE.TextureLoader().load('./models/filterFrame/textura_polar.jpeg'), transparent: true, morphTargets: true }); mat.transparent = true; // mat.morphTargets = true; frameMesh = new THREE.Mesh(geometry, mat); frameMesh.scale.multiplyScalar

How to select object in scene with button in three.js

由 爱⌒轻易说出口 提交于 2021-01-29 04:47:05
问题 I have a scene. And this scene has 3 objects(spheres and cube). On the right of the scene, I have a div element ( id = "rightMenu"). I want to add buttons to rightMenu dynamically. One of the button name sphere the other button name is cube and last one is sphere1. And when I click the sphere button, the sphere in the scene is highlighting. Here is my code: <body> <div id="Button-area"> </div> <div id="WebGL-output"> </div> <script type="text/javascript"> function init() { var scene = new

What is relation between type and format of texture

由 懵懂的女人 提交于 2021-01-28 13:43:42
问题 I am working on volumetric rendering raw data in three.js. I have a hard time understanding the relationship between the type and format of the texture (in my case it is texture3d) in three.js. Available type of texture type are : and available format are: I tried to put type as THREE.UnsignedIntType for u8int datatype of raw data but it gives invalid internalformat of texture error but everything works fine with type of THREE.UnsignedByteType . this is my code of texture, var texture = new

starsGeometry[0].setAttribute is not a function

由 心已入冬 提交于 2021-01-28 12:22:58
问题 trying to replicate the three.js globe present on this site: https://threejs.org/examples/misc_controls_fly.html and when I launch the code I get the mistake: starsGeometry[0].setAttribute is not a function ,I've bee stuck befre on a problem like this in the previous days and i would love to get the problem my init it's like this: function init() { camera = new THREE.PerspectiveCamera(25, SCREEN_WIDTH / SCREEN_HEIGHT, 50, 1e7); camera.position.z = radius * 5; scene = new THREE.Scene(); scene

starsGeometry[0].setAttribute is not a function

由 谁都会走 提交于 2021-01-28 12:18:00
问题 trying to replicate the three.js globe present on this site: https://threejs.org/examples/misc_controls_fly.html and when I launch the code I get the mistake: starsGeometry[0].setAttribute is not a function ,I've bee stuck befre on a problem like this in the previous days and i would love to get the problem my init it's like this: function init() { camera = new THREE.PerspectiveCamera(25, SCREEN_WIDTH / SCREEN_HEIGHT, 50, 1e7); camera.position.z = radius * 5; scene = new THREE.Scene(); scene

Problem with mouse-camera raycasting in threejs

由 三世轮回 提交于 2021-01-28 12:17:06
问题 I try to make a very simple program with a clickable 3d object in Threejs. My code is based on https://threejs.org/examples/#webgl_interactive_cubes It works when I click on the object (although the resulting array contains the object twice, I assume because the ray intersects it when entering it and when exiting it). But when I click in an area just surrounding the object raycaster.intersectObjects returns the object although it should return an empty array. What am I doing wrong? Why is the

Three.js: making bounding box

由 主宰稳场 提交于 2021-01-28 11:49:32
问题 In my program, I am trying to make bounding box around a point cloud. I have calculated the opposite vertices for this purpose. Here, documentation for BoxGeomtery is available. But I am not able to understand the constructor. Constructor takes width,height, depth as inputs. But what about location of the box. Where in the scene would this box be created?I want bounding box to be defined by two vertices I have. Edit: var geometry = new THREE.Box3(mn,mx); var material = new THREE
订阅 three.js