63 lines
1.4 KiB
JavaScript
63 lines
1.4 KiB
JavaScript
import * as THREE from 'three'
|
|
|
|
const scene = new THREE.Scene()
|
|
scene.background = new THREE.Color('pink')
|
|
|
|
const camera = new THREE.PerspectiveCamera(
|
|
75,
|
|
window.innerWidth / window.innerHeight,
|
|
0.1,
|
|
1000
|
|
)
|
|
camera.position.z = 5
|
|
|
|
const renderer = new THREE.WebGLRenderer()
|
|
renderer.setSize(window.innerWidth, window.innerHeight)
|
|
document.body.appendChild(renderer.domElement)
|
|
const canvas = document.createElement('canvas')
|
|
canvas.width = 256
|
|
canvas.height = 256
|
|
|
|
const ctx = canvas.getContext('2d')
|
|
|
|
ctx.fillStyle = 'white'
|
|
ctx.fillRect(0, 0, 256, 256)
|
|
|
|
ctx.fillStyle = 'black'
|
|
ctx.fillRect(0, 0, 128, 128)
|
|
ctx.fillRect(128, 128, 128, 128)
|
|
|
|
const texture = new THREE.CanvasTexture(canvas)
|
|
|
|
const geometry = new THREE.BoxGeometry(2, 2, 2)
|
|
|
|
const material = new THREE.MeshBasicMaterial({ map: texture })
|
|
|
|
const light1 = new THREE.AmbientLight(0xffffff, 0.5)
|
|
scene.add(light1)
|
|
|
|
const light2 = new THREE.PointLight(0xffffff, 1)
|
|
light2.position.set(5, 5, 5)
|
|
scene.add(light2)
|
|
|
|
const cube = new THREE.Mesh(geometry, material)
|
|
scene.add(cube)
|
|
|
|
function animate() {
|
|
requestAnimationFrame(animate)
|
|
|
|
cube.rotation.x += 0.01
|
|
cube.rotation.y += 0.01
|
|
|
|
renderer.render(scene, camera)
|
|
}
|
|
|
|
animate()
|
|
|
|
window.addEventListener('resize', () => {
|
|
camera.aspect = window.innerWidth / window.innerHeight
|
|
camera.updateProjectionMatrix()
|
|
renderer.setSize(window.innerWidth, window.innerHeight)
|
|
})
|
|
|