6 

const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); const controls = new OrbitControls(camera); camera.position.set(200, 0, 0); controls.update(); const geometry = new THREE.SphereGeometry(50, 32, 32); const material = new THREE.MeshBasicMaterial({ color: 0xffff00 }); const sphere = new THREE.Mesh(geometry, material); scene.add(sphere); const renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); function animate() { requestAnimationFrame(animate); controls.update(); renderer.render(scene, camera); }
<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.min.js"></script>

When I run my javascript code. I get the following error "Uncaught ReferenceError: OrbitControls is not defined". I saw this post about it, but it doesn't seem to help. Any ideas?

My OrbitControls.js is in the same file under the three.js file

Improve this question

1 Answer 1

Reset to default
6

I got your code running without errors by importing OrbitControls and defining your renderer at the top and passing it into OrbitControls.

Edit, I added a second snippet that was adapted from a three.js example on their site that I think adds the yellow sphere you're looking for.

let camera, controls, scene, renderer; init(); //render(); // remove when using next line for animation loop (requestAnimationFrame) animate(); function init() { scene = new THREE.Scene(); scene.background = new THREE.Color(0xcccccc); scene.fog = new THREE.FogExp2(0xcccccc, 0.002); renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000); camera.position.set(400, 200, 0); // controls controls = new THREE.OrbitControls(camera, renderer.domElement); //controls.addEventListener( 'change', render ); // call this only in static scenes (i.e., if there is no animation loop) controls.enableDamping = true; // an animation loop is required when either damping or auto-rotation are enabled controls.dampingFactor = 0.05; controls.screenSpacePanning = false; controls.minDistance = 100; controls.maxDistance = 500; controls.maxPolarAngle = Math.PI / 2; // world const geometry = new THREE.SphereGeometry(50, 32, 32); const material = new THREE.MeshBasicMaterial({ color: 0xffff00 }); const sphere = new THREE.Mesh(geometry, material); scene.add(sphere); // window.addEventListener('resize', onWindowResize); } function onWindowResize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); } function animate() { requestAnimationFrame(animate); controls.update(); // only required if controls.enableDamping = true, or if controls.autoRotate = true render(); } function render() { renderer.render(scene, camera); }
<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/controls/OrbitControls.min.js"></script>

let camera, controls, scene, renderer; init(); //render(); // remove when using next line for animation loop (requestAnimationFrame) animate(); function init() { scene = new THREE.Scene(); scene.background = new THREE.Color(0xcccccc); scene.fog = new THREE.FogExp2(0xcccccc, 0.002); renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000); camera.position.set(400, 200, 0); // controls controls = new THREE.OrbitControls(camera, renderer.domElement); //controls.addEventListener( 'change', render ); // call this only in static scenes (i.e., if there is no animation loop) controls.enableDamping = true; // an animation loop is required when either damping or auto-rotation are enabled controls.dampingFactor = 0.05; controls.screenSpacePanning = false; controls.minDistance = 100; controls.maxDistance = 500; controls.maxPolarAngle = Math.PI / 2; // world const geometry = new THREE.SphereGeometry(50, 32, 32); const material = new THREE.MeshBasicMaterial({ color: 0xffff00 }); const sphere = new THREE.Mesh(geometry, material); scene.add(sphere); // window.addEventListener('resize', onWindowResize); } function onWindowResize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); } function animate() { requestAnimationFrame(animate); controls.update(); // only required if controls.enableDamping = true, or if controls.autoRotate = true render(); } function render() { renderer.render(scene, camera); }
 <script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/controls/OrbitControls.min.js"></script>

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Thanks, it seems to work ! but it is strange, I should have a yellow sphere appearing... Do you have any idea why it doesn't?
I've added a second snippet adapted from an example on their site that I think adds the yellow sphere you're looking for. I'm not immediately sure why it's not showing up in your original code.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.