three.js

问题 I'm trying to use SVGRenderer in three.js (http://threejs.org/examples/#svg_sandbox). The example shows you how to make an SVG element (a circle) on the fly. I want to import an SVG file that I already have in my computer. How would I do that? The createElementNS command doesn't seem to support importing SVG files? I essentially want my image.svg to be displayed on a three.js scene. 回答1: You can use the THREE.SVGLoader() Library to achieve it : var svgManager = new THREE.LegacySVGLoader();

问题 I'm trying to use SVGRenderer in three.js (http://threejs.org/examples/#svg_sandbox). The example shows you how to make an SVG element (a circle) on the fly. I want to import an SVG file that I already have in my computer. How would I do that? The createElementNS command doesn't seem to support importing SVG files? I essentially want my image.svg to be displayed on a three.js scene. 回答1: You can use the THREE.SVGLoader() Library to achieve it : var svgManager = new THREE.LegacySVGLoader();

问题 I'm trying to put an object in front of the camera, but have not been able to. I'm using the FlyControls what moves the camera, and I now want to put an object in front of it. How can I do this? I've tried many different ways, but I did not succeed. Thanks 回答1: Have you tried making your object a child of your camera and then translating it forward? camera.add(nanobot); nanobot.position.set(0,0,-100); The above places the nanobot permanently 100 units in front of the camera... and that's

问题 How can I create a custom square registering a new component in a-frame? I am trying to update the example found here https://github.com/aframevr/aframe/blob/master/docs/components/geometry.md under the heading "Register a Custom Geometry" Below is what I have tried - first the js AFRAME.registerGeometry('example', { schema: { vertices: { default: ['-10 10 0', '-10 -10 0', '10 -10 0', '10 -10 0'], //added a 4th set of dimensions here } }, init: function (data) { var geometry = new THREE

问题 How can I create a custom square registering a new component in a-frame? I am trying to update the example found here https://github.com/aframevr/aframe/blob/master/docs/components/geometry.md under the heading "Register a Custom Geometry" Below is what I have tried - first the js AFRAME.registerGeometry('example', { schema: { vertices: { default: ['-10 10 0', '-10 -10 0', '10 -10 0', '10 -10 0'], //added a 4th set of dimensions here } }, init: function (data) { var geometry = new THREE

问题 I'm trying to add custom geometry to my forge viewer, following this example. It mostly works fine, except when using certain colors. I'm using the following code to add a sphere mesh: const geometry = new THREE.SphereGeometry(0.4, 32, 32) const material = new THREE.MeshBasicMaterial({ color: someColor, transparent: false, }) const sphere = new THREE.Mesh(geometry, material) viewer.overlays.addScene('sphere-mesh-scene') viewer.overlays.addMesh(sphere, 'sphere-mesh-scene') for certain values

问题 I'm trying to add custom geometry to my forge viewer, following this example. It mostly works fine, except when using certain colors. I'm using the following code to add a sphere mesh: const geometry = new THREE.SphereGeometry(0.4, 32, 32) const material = new THREE.MeshBasicMaterial({ color: someColor, transparent: false, }) const sphere = new THREE.Mesh(geometry, material) viewer.overlays.addScene('sphere-mesh-scene') viewer.overlays.addMesh(sphere, 'sphere-mesh-scene') for certain values

问题 I can't seem to get an InstancedBufferGeometry to appear in a scene anymore. I've tried the following technique: let bg = BoxBufferGeometry(3,3,3), ig : InstancedBufferGeometry = new InstancedBufferGeometry(), mesh : Mesh; ig.index = bg.index; ig.attributes.position = bg.attributes.position; ig.attributes.uv = bg.attributes.uv; //ig.copy( bg ); <- also tried this ig.instanceCount = Infinity; <- otherwise this populates as undefined var offsets = []; var orientations = []; var vector = new

问题 I can't seem to get an InstancedBufferGeometry to appear in a scene anymore. I've tried the following technique: let bg = BoxBufferGeometry(3,3,3), ig : InstancedBufferGeometry = new InstancedBufferGeometry(), mesh : Mesh; ig.index = bg.index; ig.attributes.position = bg.attributes.position; ig.attributes.uv = bg.attributes.uv; //ig.copy( bg ); <- also tried this ig.instanceCount = Infinity; <- otherwise this populates as undefined var offsets = []; var orientations = []; var vector = new

问题 Has anyone tried using the OrbitControls function with ReactJS? Here is the sample code I wrote: import React, { Component } from 'react'; import 'tachyons'; import * as THREE from 'react'; import OrbitControls from 'three-orbitcontrols'; class App extends Component { render() { ... //Controls const controls = new OrbitControls(camera, renderer.domElement) controls.dampingFactor = 0.25 controls.enableZoom = false It returns the following error: ./node_modules/three-orbitcontrols/OrbitControls