61 lines
1.7 KiB
TypeScript
61 lines
1.7 KiB
TypeScript
import * as THREE from 'three'
|
|
import { loadThreeJsTextureFromBitmap } from '../renderer/viewer/lib/utils/skins'
|
|
|
|
// Create scene, camera and renderer
|
|
const scene = new THREE.Scene()
|
|
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
|
|
const renderer = new THREE.WebGLRenderer()
|
|
renderer.setSize(window.innerWidth, window.innerHeight)
|
|
document.body.appendChild(renderer.domElement)
|
|
|
|
// Position camera
|
|
camera.position.z = 5
|
|
|
|
// Create a canvas with some content
|
|
const canvas = document.createElement('canvas')
|
|
canvas.width = 256
|
|
canvas.height = 256
|
|
const ctx = canvas.getContext('2d')
|
|
|
|
scene.background = new THREE.Color(0x444444)
|
|
|
|
// Draw something on the canvas
|
|
ctx.fillStyle = '#444444'
|
|
// ctx.fillRect(0, 0, 256, 256)
|
|
ctx.fillStyle = 'red'
|
|
ctx.font = '48px Arial'
|
|
ctx.textAlign = 'center'
|
|
ctx.textBaseline = 'middle'
|
|
ctx.fillText('Hello!', 128, 128)
|
|
|
|
// Create bitmap and texture
|
|
async function createTexturedBox() {
|
|
const canvas2 = new OffscreenCanvas(256, 256)
|
|
const ctx2 = canvas2.getContext('2d')!
|
|
ctx2.drawImage(canvas, 0, 0)
|
|
const texture = new THREE.Texture(canvas2)
|
|
texture.magFilter = THREE.NearestFilter
|
|
texture.minFilter = THREE.NearestFilter
|
|
texture.needsUpdate = true
|
|
texture.flipY = false
|
|
|
|
// Create box with texture
|
|
const geometry = new THREE.BoxGeometry(2, 2, 2)
|
|
const material = new THREE.MeshBasicMaterial({
|
|
map: texture,
|
|
side: THREE.DoubleSide,
|
|
premultipliedAlpha: false,
|
|
})
|
|
const cube = new THREE.Mesh(geometry, material)
|
|
scene.add(cube)
|
|
}
|
|
|
|
// Create the textured box
|
|
createTexturedBox()
|
|
|
|
// Animation loop
|
|
function animate() {
|
|
requestAnimationFrame(animate)
|
|
renderer.render(scene, camera)
|
|
}
|
|
animate()
|