three.js

How to use OBJLoader and MTLLoader in THREE.js r74 and later

由 无人久伴 提交于 2019-12-17 20:15:48
问题 It seems that OBJMTLLoader has been removed recently (r74?), but I cannot track down any documentation on how to use the two replacement classes. Here is the current code I have (adapted from Three.js Cookbook): <script src="../libs/three.r74.js"></script> <script src="../libs/MTLLoader.js"></script> <script src="../libs/OBJMTLLoader.js"></script> <script> var legoManMesh = null; function init(){ /* Create my scene here */ } var loader = new THREE.OBJMTLLoader(); loader.load("../assets/models

Extruding multiple polygons with multiple holes and texturing the combined shape

由 我的梦境 提交于 2019-12-17 19:53:42
问题 This question is related to this question. The answer shows very nice way to extrude polygons that have holes (see the excellent live example). The main learning of the answer was that paths in three.js (r58) cannot have more than one moveTo command and it have to be in the start of the path, which means that path have to be broken by moveTos, so that moveTo start always a new path. Extruding in three.js means that 2D paths are converted to 3D shapes using possible beveling. It is suitable

Three.js How to get position of a mesh?

由 自古美人都是妖i 提交于 2019-12-17 19:49:12
问题 With the below code, position of a mesh is returned as (0, 0, 0) but it is not. So is the positioın vector calculated after render process? me.scene.add(objMesh); //me is a project class objMesh.updateMatrixWorld(true); alert(objMesh.position.x + ',' + objMesh.position.y + ',' + objMesh.position.z); objMesh is created from objfile, it is added to the scene correctly and centroid is approx (-8, 3, 0) but position vector of objMesh is (0, 0, 0) do we have to auto calculate something first or

Three.js - move custom geometry to origin

由 ε祈祈猫儿з 提交于 2019-12-17 19:42:14
问题 I have some custom geometries obtained from a STEP file conversion and I use the mouse to rotate them. They rotate around the origin of the scene, but since they are far from it, they seem rotating on a virtual sphere. How can I move them to the origin so that they don't seem "floating" around (I mean that I'd like to reduce to zero the radius of the virtual sphere). This is the example I'd like to move. I've tried setting their position to (0, 0, 0) doing: object.position.x = 0; object

Can a three.js material have separate repeat values for a bump map and a texture map?

由 喜欢而已 提交于 2019-12-17 19:29:36
问题 I'm trying to break up the repetition in my texture by applying a bump map which repeats much less frequently. Unfortunately, it seems to take on the repeat value of 'landTexture' below (64), instead of the value I set it to (1). landTexture.wrapS = landTexture.wrapT = THREE.RepeatWrapping; landTexture.repeat.set(64, 64); bumpTexture.wrapS = bumpTexture.wrapT = THREE.RepeatWrapping; bumpTexture.repeat.set(1, 1); var m = new THREE.MeshPhongMaterial({map:landTexture, ambient: 0x552811, specular

Incrementally display three.js TubeGeometry

由 ♀尐吖头ヾ 提交于 2019-12-17 19:25:05
问题 I am able to display a THREE.TubeGeometry figure as follows Code below, link to jsbin <html> <body> <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r75/three.js"></script> <script> // global variables var renderer; var scene; var camera; var geometry; var control; var count = 0; var animationTracker; init(); drawSpline(); function init() { // create a scene, that will hold all our elements such as objects, cameras and lights. scene = new THREE.Scene(); // create a camera, which

Three.JS Object following a spline path - rotation / tanget issues & constant speed issue

由 随声附和 提交于 2019-12-17 18:31:57
问题 I think my issue is similar to: Orient object's rotation to a spline point tangent in THREE.JS but I can't access the jsfiddle's properly and I struggled with the second part of the explanation. Basically, I have created this jsfiddle: http://jsfiddle.net/jayfield1979/qGPTT/2/ which demonstrates a simple cube following the path created by a spline using SplineCurve3 . Use standard TrackBall mouse interaction to navigate. Positioning the cube along the path is simple. However I have two

How to calculate the z-distance of a camera to view an image at 100% of its original scale in a 3D space

由 冷暖自知 提交于 2019-12-17 18:11:07
问题 How can one calculate the camera distance from an object in 3D space (an image in this case) such that the image is at its original pixel width. Am I right in assuming that this is possible given the aspect ratio of the camera, fov, and the original width/height of the image in pixels? (In case it is relevant, I am using THREE.js in this particular instance). Thanks to anyone who can help or lead me in the right direction! 回答1: Thanks everyone for all the input! After doing some digging and

How to connect Threejs to React?

由 廉价感情. 提交于 2019-12-17 17:33:49
问题 I work with React and use a canvas. I want to change the canvas to WebGL (Threejs library). How to connect this library to React? I have some element, e.g. <div ref="threejs"></div> How to make it a field for the Threejs library call? P.S:. I don't want to use extensions like react-threejs 回答1: Here is an example of how to set this up (see demo): import React, { Component } from 'react' import * as THREE from 'three' class Scene extends Component { constructor(props) { super(props) this.start

How to select a root Object3D using Raycaster

由 半腔热情 提交于 2019-12-17 16:52:19
问题 I have a parent Object3D that has child meshes. How can I use Raycaster to select only the root parent object? my example 回答1: If you have a parent Object3D that has multiple child meshes, and you want to select the parent by raycasting, you can do the following: Add the parent object to the array of objects: var objects = []; ... objects.push( root_parent_object ); Add to each child object a pointer to the root parent object: child.userData.parent = root_parent_object; Pass in the recursive
订阅 three.js