Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
// Remember to bring in three.js and here is the script for the trackball controls as well:
// https://cdn.rawgit.com/mrdoob/three.js/dev/examples/js/controls/TrackballControls.js
//RENDERER
const renderer = new THREE.WebGLRenderer({
canvas: document.getElementById('canvas'),
antialias: true
});
renderer.setClearColor(0x25c8ce);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
//CAMERA
const camera = new THREE.PerspectiveCamera(
35,
window.innerWidth / window.innerHeight,
0.1,
3000
);
//SCENE
const scene = new THREE.Scene();
//LIGHTS
const light1 = new THREE.AmbientLight(0xffffff, 0.5),
light2 = new THREE.PointLight(0xffffff, 1);
scene.add(light1);
scene.add(light2);
//OBJECT
const geometry = new THREE.CubeGeometry(100, 100, 100);
const material = new THREE.MeshLambertMaterial({ color: 0xf3ffe2 });
const mesh = new THREE.Mesh(geometry, material);
mesh.position.set(0, 0, -1000); //set the view position backwards in space so we can see it
scene.add(mesh);
//RENDER LOOP
requestAnimationFrame(render);
function render() {
mesh.rotation.x += 0.01;
mesh.rotation.y += 0.03;
renderer.render(scene, camera);
requestAnimationFrame(render);
}
window.addEventListener( 'resize', function () {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}, false );
@tjshipe

This comment has been minimized.

Copy link

@tjshipe tjshipe commented May 12, 2020

I just finished your awesome Learn with Jason video and I'm testing out the gist. It works great other than I'm struggling with adding TrackballControls in a Codepen. It appears it's loading the file but the zooming in/out isn't working. Any chance you can look at this Codepen and let me know what I'm doing wrong? https://codepen.io/tjshipe/pen/bGVMzog?editors=0011

@bovas85

This comment has been minimized.

Copy link

@bovas85 bovas85 commented Jun 7, 2020

Seems there's a deprecation going on @tjshipe

THREE.TrackballControls: As part of the transition to ES6 Modules, the files in 'examples/js' were deprecated in May 2020 (r117) and will be deleted in December 2020 (r124). You can find more information about developing using ES6 Modules in https://threejs.org/docs/index.html#manual/en/introduction/Import-via-modules."

@tjshipe

This comment has been minimized.

Copy link

@tjshipe tjshipe commented Jun 7, 2020

@bovas85

This comment has been minimized.

Copy link

@bovas85 bovas85 commented Jun 7, 2020

I found this which works in another pen:
Add to top of the js tab

import * as THREE from 'https://threejsfundamentals.org/threejs/resources/threejs/r110/build/three.module.js';
import { OrbitControls } from 'https://threejsfundamentals.org/threejs/resources/threejs/r110/examples/jsm/controls/OrbitControls.js';
import { GUI } from 'https://threejsfundamentals.org/3rdparty/dat.gui.module.js';
@tjshipe

This comment has been minimized.

Copy link

@tjshipe tjshipe commented Jun 7, 2020

@bovas85 Any idea what I'm doing wrong here? https://codepen.io/tjshipe/pen/bGVMzog

Trackpad still isn't zooming or panning for me. Maybe this is just an issue with CodePen.

@bovas85

This comment has been minimized.

Copy link

@bovas85 bovas85 commented Jun 8, 2020

no idea, try copying this as boilerplate and removing the bits you don't need
https://codepen.io/vcomics/pen/yLyXQJG

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment