← All scenes

Textured Cube

A picture from a file, wrapped round a turning crate. Drag to turn it.

# A textured cube: a picture from a file, wrapped round a turning crate.
# Shows: THREE.TextureLoader().load() with a path beside the scene, and map= on a material.
# Drag to turn it.
#
# Run it:   pyctures run textured_cube.py
# Share it: pyctures build textured_cube.py -o site/   (textures/crate.png goes with it)

renderer = THREE.WebGLRenderer(canvas=canvas, antialias=True)
renderer.setPixelRatio(pixel_ratio)
renderer.setSize(width, height, False)
scene = THREE.Scene()
scene.background = THREE.Color(0x1b2430)
camera = THREE.PerspectiveCamera(50, width / height, 0.1, 100)
camera.position.set(0, 1.2, 4)
controls = addons.OrbitControls(camera, canvas)

texture = THREE.TextureLoader().load("textures/crate.png")
texture.colorSpace = THREE.SRGBColorSpace
crate = THREE.Mesh(THREE.BoxGeometry(1.6, 1.6, 1.6), THREE.MeshStandardMaterial(map=texture))
scene.add(crate)

light = THREE.DirectionalLight(0xffffff, 2.5)
light.position.set(3, 4, 5)
scene.add(light)
scene.add(THREE.AmbientLight(0xffffff, 0.6))

def draw():
    crate.rotation.y += 0.008
    crate.rotation.x = 0.35
    controls.update()
    renderer.render(scene, camera)

Run it yourself

pip install pyctures
pyctures run textured_cube.py

Put it on your website

pyctures build textured_cube.py -o site/

Python runs in the visitor's browser, so any static host works. How · This file on GitHub