JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://threejs.org/build/three.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
JavaScript
const SUN_POSITION = new THREE.Vector3(0, 10, - 10);
let material;
function createDemo() {
const uniforms = {
lightPos: { value: new THREE.Vector3() }
};
material = new THREE.ShaderMaterial({
uniforms,
vertexShader: `
varying vec3 vViewPosition;
varying vec3 vNormal;
void main() {
vec4 vViewPosition4 = modelViewMatrix * vec4(position, 1.0);
vViewPosition = vViewPosition4.xyz;
vNormal = normalMatrix * normal;
gl_Position = projectionMatrix * vViewPosition4;
}
`,
fragmentShader: `
uniform vec3 lightPos;
varying vec3 vNormal;
varying vec3 vViewPosition;
void main() {
vec3 normal = normalize(vNormal);
vec3 lightDir = normalize(lightPos - vViewPosition);
float lambertian = max(dot(normal, lightDir), 0.0);
gl_FragColor = vec4(vec3(1.0) * lambertian, 1.0);
}
`,
});
const sphere = new THREE.Mesh(
new THREE.SphereBufferGeometry(2.5, 32, 32),
material,
);
const sun = new THREE.Mesh(
new THREE.SphereBufferGeometry(0.25, 32, 32),
new THREE.MeshBasicMaterial({
color: new THREE.Color(0xffff00),
}),
);
sun.position.copy(SUN_POSITION);
const demo = new Demo();
demo.add(sphere);
demo.add(sun);
demo.add(new THREE.AxesHelper(10));
demo.start();
}
class Demo {
constructor() {
this._scene = new THREE.Scene();
this._scene.background = new THREE.Color(0x1a1a1a);
const renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
this._renderer = renderer;
const camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.1,
1000
);
camera.position.set(10, 10, 10);
camera.lookAt(0, 0, 0);
this._camera = camera;
const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.update();
controls.addEventListener('change', this._animate.bind(this));
this._controls =...