three.js

Using Three.js as Closure library?

核能气质少年 提交于 2019-12-24 11:22:31
问题 Looking at Three.js's build script, I see they use Google Closure compiler. I am having a small script utilizing Three.js. Can I use Google Closure to compile the script with Three.js as a library (instead of having Three.min.js preambled or included in an HTML tag) so the final output javascript is much smaller. I'm asking this because I don't see any goog.provide in Three.js source. 回答1: It looks like the build command does not specify a compilation level. That means it is using the default

How to load texture in jsfiddle

和自甴很熟 提交于 2019-12-24 11:17:17
问题 How to use THREE.ImageUtils.loadTexture() in jsfiddle. I have created a demo [ http://jsfiddle.net/georgeneil/cfrsj/10/ ]. Here I am not able to view the texture. I am getting the points rendered as black. 回答1: You can base64 encode the image. And then add the string in your code. Updated jsfiddle: http://jsfiddle.net/cfrsj/11/ 回答2: The problem is you cannot use a texture that is hosted externally. Here is some code I created to put a texture on a plane. I believe I adapted this code from one

THREE.js Texture is not visible with SVGRenderer

与世无争的帅哥 提交于 2019-12-24 10:58:31
问题 We've tried the next code: var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.0001, 999); camera.position.set( 0, 0, 3 ); scene.add( camera ); var material = new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: true } ); var image = $('#tmp')[0] var texture = new THREE.Texture(image); texture.needsUpdate = true; var img_material = new THREE.MeshBasicMaterial({color: 0x000000, map: texture }); var plane_geometry = new

World Position of Vertex in grouped Object3D Geometry

雨燕双飞 提交于 2019-12-24 10:46:54
问题 I've spend 7 hours so far trying every combination from the answers found here already: How to get the absolute position of a vertex in three.js? I'm trying to find the vertex positions of the geometry of a plane, which is inside an Object3D, which is inside a group. I can get the global coordinates of the Object3D without issue, even when the group or the Object3D are moved around, but the vertices either only give me their local coordinates, or give me garbage numbers that don't correlate

How to enter fullscreen in three.js?

巧了我就是萌 提交于 2019-12-24 10:46:30
问题 I have tried tens of different methods for hours and NONE works, like the following: document.body.addEventListener("keydown", function() { THREEx.FullScreen.request(); }, false); How to make Three.js fullscreen? First of all, THREEx is NOT THREE.js. I don't want somebody's extension (which isn't even written completely and clarified) The word "fullscreen" does not exist in three.js files, at all. No three.js books mention how to go fullscreen either. In my case, all the js and webgl code

cross-domain image for three.js (canvas/webGL), proxy?

ぐ巨炮叔叔 提交于 2019-12-24 10:45:59
问题 I realize this may not be possible... I've been scouring around and trying out different things to no avail, but I thought it might merit a post before giving up... I'm putting together an app that uses three.js (webGL) and I would like to give the user the option to input a URL to any image on the web and use that to texture a 3D object in the web app. This would be no problem if not for the whole cross-domain security issue. I know there are supposed to be some work arounds for CORS

Rotate around World Axis

拥有回忆 提交于 2019-12-24 10:45:48
问题 I tried to rotate an object arount the Worlds-Y-Axis, with myObject.rotateOnWorldAxis(new THREE.Vector3(0,1,0),THREE.Math.degToRad(1)); but the result was, that the object is only rotated in object space. To be sure that I used the correct method I looked into the documentation and found that there are three methods to rotate an object: .RotateY(rad) // rotate in Local Space .rotateOnAxis(axis,rad) // rotation in Object Space .rotateOnWorldAxis(axis,rad) // rotation in World Space It seems

3d (THREE.js) : difference matrix

℡╲_俬逩灬. 提交于 2019-12-24 10:45:24
问题 I would like to save the info that represents the relative difference between two THREE.Object3d. I prefer to save the data as a transformation matrix. Can someone knows what do i need to do to get this? I would like to have a matrix4 that later on i could apply on an object and it will move/rotate by the same values. Thanks 回答1: So you have two transformations A and B you are looking for the transformation T that transforms A into B, right? Formally this is written as B = T · A Now you can

Clickable three Js Objects / Convex Items

一曲冷凌霜 提交于 2019-12-24 10:41:30
问题 I modified an example from Three.js library and i try to add click event on objects. After a lot of attempts... I'm still not capable to listen clicks. This code produce convex forms. There is my code : if ( ! Detector.webgl ) Detector.addGetWebGLMessage(); var container, stats; var camera, scene, renderer; var objects = []; init(); animate(); function init() { container = document.createElement( 'div' ); document.body.appendChild( container ); camera = new THREE.PerspectiveCamera( 45, window

three.js shadow map shows on back side issue. Is there a work around?

微笑、不失礼 提交于 2019-12-24 10:39:34
问题 I have an issue with shadow map showing on the back side of an object, I have been fighting with that for almost two days now, thinking I was surely doing something wrong. Then I wrote this jsFiddle : http://jsfiddle.net/gui2one/ec1snfee/ code below : // shadow map issue var light ,mesh, renderer, scene, camera, controls; var clock = new THREE.Clock({autoStart:true}); init(); animate(); function init() { // renderer renderer = new THREE.WebGLRenderer(); renderer.shadowMapEnabled = true;