three.js

问题 Question : Why isn't the 3D graphic rendering? Details : I am trying to load the json format of this graphic in the loading.component.ts file. I am using Angular 2 and Three.js. I've looked at several examples, but cannot find what I did wrong. This is my first time trying to load a 3D image. Any help appreciated. The entire project can be found here. Console Error : core.es5.js:1084 ERROR TypeError: Cannot read property 'scene' of undefined at loading.component.ts:46 at ObjectLoader.parse

问题 Please see this fiddle - http://jsfiddle.net/vnr2v6mL/ var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); var renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); var geometry = new THREE.BoxGeometry(100, 100, 1); var material = new THREE.MeshPhongMaterial({ color: 0x00ff00 }); var plane = new THREE.Mesh(geometry, material);

问题 I use the function "MakeTextSprite" in https://stemkoski.github.io/Three.js/Sprite-Text-Labels.html function makeTextSprite(message, parameters) { if (parameters === undefined) parameters = {}; var fontface = parameters.hasOwnProperty("fontface") ? parameters["fontface"] : "Helvetica"; var fontsize = parameters.hasOwnProperty("fontsize") ? parameters["fontsize"] : 18; var borderThickness = parameters.hasOwnProperty("borderThickness") ? parameters["borderThickness"] : 0; var borderColor =

问题 I'm using an equirectangular video as a texture for a sphere. You can mouse pan around the environment, but on mobile, I'd like to use this solution: https://github.com/mrdoob/three.js/blob/master/examples/js/controls/DeviceOrientationControls.js It works great, however, I'm not sure how to "calibrate" or "orient" on start to an ideal center. Because the video starts with a logo in the dead center of the video, the user must move the device around to find where that is. On start, I'd like to

问题 I'm using an equirectangular video as a texture for a sphere. You can mouse pan around the environment, but on mobile, I'd like to use this solution: https://github.com/mrdoob/three.js/blob/master/examples/js/controls/DeviceOrientationControls.js It works great, however, I'm not sure how to "calibrate" or "orient" on start to an ideal center. Because the video starts with a logo in the dead center of the video, the user must move the device around to find where that is. On start, I'd like to

问题 I generate 10 random points. I want connect each point to every another and get faces for every flat area. So, it will nice 3D object with invisible flat faces inside. How is it possible to make faces from geometry of 10 random points? var objects3 = []; var geometrySpline = new THREE.Geometry(); for ( var i = 0; i < 10; i ++ ) { x = Math.floor(Math.random() * (max - min + 1)) + min; y = Math.floor(Math.random() * (max - min + 1)) + min; z = Math.floor(Math.random() * (max - min + 1)) + min;

问题 I have a floating plane in three js. It's double sided and my camera moves and rotates about the scene. My question is, given the position and rotation of the plane and position and rotation of the camera, how can I tell which side of the plane I am looking at? My old solution is this (check the distance from camera to front and back of the plane) but obviously this isn't the best solution. this.back.matrixWorldNeedsUpdate = true; this.front.matrixWorldNeedsUpdate = true; this.d1 = (new THREE

问题 I am trying 3D visualization in web application,currently using three.js. I am able to load .stl file for next phase i want to load .STEP / .STP file but unable to load it, is there is any way ? i have done some research and found that it can be done using pythonOCC but i have no idea about it so please suggest. Thank you in advance 回答1: This cannot be done on the front end easily. You probably need a library as big as three.js to process the step files and turn them into a mesh. OCC probably

问题 I have seen that it is possible to create a sticky image effect on hover using three.js which inspired me with an idea of doing this effect over a video. I am using THREE.VideoTexture() in place of where an image was defined to create a background video. How can I set the video with the id video to the background of my canvas? const videoSize = [1250, 1097]; const vertex = ` attribute vec2 uv; attribute vec2 position; varying vec2 vUv; void main() { vUv = uv; gl_Position = vec4(position, 0, 1

问题 Below is my piece of code which loads a mesh onto the object. At the moment its traversing through the entire thing. Current code: var loader = new THREE.GLTFLoader(); loader.load( '../gtf/Box.gltf', function ( gltf ) { model = gltf.scene; gltf.scene.traverse( function ( child ) { if ( child.isMesh ) { child.material.map = texture; } } ); scene.add( model); } ); How would I go about making an array of children[] ? Each child will would then allow me to assign separate textures. I have made