three.js starter

// 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 );

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

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."

Thank you!

…

On Sun, Jun 7, 2020 at 12:34 PM Alessandro Giordo ***@***.***> wrote: ***@***.**** commented on this gist. ------------------------------ You can do this inside the script import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'; — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <https://gist.github.com/4d33b9328ca2d544ad429b27e4c2bf59#gistcomment-3333465>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAJSMHR7OUORRDWS7DOIQ6LRVO6QHANCNFSM4M64H3CQ> .

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';

@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.

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