View final.js
global.THREE = require("three"); | |
require("three/examples/js/controls/OrbitControls"); | |
const canvasSketch = require("canvas-sketch"); | |
const settings = { | |
animate: true, | |
context: "webgl", | |
scaleToView: true | |
}; |
View block16.js
//... | |
// LIGHTING | |
const light = new THREE.PointLight("white", 1.25); | |
light.position.set(0, 0, 0); | |
scene.add(light); | |
// illuminate the sun | |
createSpotlights(scene); // call the function and pass in our scene | |
// HELPERS |
View block15.js
//... | |
// LIGHTING | |
const light = new THREE.PointLight("white", 1.25); | |
light.position.set(0, 0, 0); | |
scene.add(light); | |
const spotlight = new THREE.SpotLight(0xFFFFFF, 5, 25, Math.PI/7); | |
spotlight.position.set(25, 0, 0); | |
scene.add(spotlight); |
View block14.js
//... | |
// TEXTURES | |
const loader = new THREE.TextureLoader(); | |
const sunTexture = loader.load("assets/sun.jpg"); | |
const mercuryTexture = loader.load("assets/mercury.jpg"); | |
//... | |
// MATERIALS | |
const sunMaterial = new THREE.MeshStandardMaterial({ map: sunTexture }); | |
const mercuryMaterial = new THREE.MeshStandardMaterial({ map: mercuryTexture }); |
View block13.js
// CAMERA | |
const camera = new THREE.PerspectiveCamera(100, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 1000); | |
camera.position.set(30, 5, 35); | |
// ORBIT CONTROLS | |
const controls = new THREE.OrbitControls(camera, context.canvas); | |
controls.target.set(30, 0, 0); |
View block12.js
global.THREE = require("three"); | |
require("three/examples/js/controls/OrbitControls"); | |
const canvasSketch = require("canvas-sketch"); | |
const settings = { | |
animate: true, | |
context: "webgl", | |
scaleToView: true | |
}; |
View block11.js
function createPlanet(scene, mesh, group, x, scale) { | |
mesh.position.set(x, 0, 0); | |
mesh.scale.setScalar(scale); | |
group.add(mesh); | |
scene.add(group); | |
} |
View block10.js
//... | |
return { | |
render({ time }) { | |
mercuryGroup.rotation.y = time * 0.5; // rotate around the sun | |
mercuryMesh.rotation.y = time * 0.20; // rotate the planet | |
controls.update(); | |
renderer.render(scene, camera); | |
}, | |
//... |
View block9.js
const mercuryGroup = new THREE.Group(); // create new Group | |
const mercuryMesh = new THREE.Mesh(geometry, mercuryMaterial); | |
mercuryMesh.position.set(25, 0, 0); | |
mercuryMesh.scale.setScalar(0.8); | |
mercuryGroup.add(mercuryMesh) // Add mesh to the group | |
scene.add(mercuryGroup); // Add group to the scene |
View block8.js
//... | |
// SCENE | |
const scene = new THREE.Scene(); | |
// TEXTURES | |
// ... | |
const venusTexture = loader.load("assets/venus.jpg"); | |
const earthTexture = loader.load("assets/earth.jpg"); | |
// MATERIALS |
NewerOlder