48 lines
1.2 KiB
JavaScript
48 lines
1.2 KiB
JavaScript
import { PointLight } from 'three';
|
|
import './style.css';
|
|
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls';
|
|
import * as THREE from 'three';
|
|
|
|
|
|
const scene = new THREE.Scene();
|
|
|
|
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
|
|
|
|
const renderer = new THREE.WebGLRenderer({
|
|
canvas: document.querySelector('#bg'),
|
|
});
|
|
|
|
renderer.setPixelRatio(window.devicePixelRatio);
|
|
renderer.setSize(window.innerWidth, window.innerHeight);
|
|
camera.position.setZ(30);
|
|
|
|
renderer.render(scene, camera);
|
|
|
|
const geometry = new THREE.TorusGeometry(10, 3, 16, 100);
|
|
const material = new THREE.MeshStandardMaterial({color: "green"});
|
|
const torus = new THREE.Mesh(geometry, material);
|
|
|
|
scene.add(torus);
|
|
|
|
const pointLight = new PointLight(0xffffff, 150);
|
|
|
|
const ambientLight = new THREE.AmbientLight(0xffffff);
|
|
scene.add(ambientLight, pointLight);
|
|
|
|
pointLight.position.set(10, 10, 10);
|
|
|
|
const lightHelper = new THREE.PointLightHelper(pointLight);
|
|
scene.add(lightHelper);
|
|
|
|
|
|
|
|
function animate(){
|
|
requestAnimationFrame(animate);
|
|
|
|
torus.rotation.x += 0.01;
|
|
torus.rotation.y -= 0.01;
|
|
torus.rotation.z -= 0.01;
|
|
|
|
renderer.render(scene, camera)
|
|
}
|
|
animate(); |