75 lines
2.2 KiB
JavaScript
75 lines
2.2 KiB
JavaScript
import * as THREE from 'three';
|
|
import ShapesManager from './ShapesManager.js';
|
|
import ToonShaderRenderChain from './ToonShaderRenderChain.js';
|
|
import { hasExtensionsFor } from '../utils/webGLSupport.js';
|
|
|
|
// TODO move to const
|
|
export const CANVAS_SIZE = 100;
|
|
|
|
const CANVAS_WIDTH = CANVAS_SIZE * 2;
|
|
const CANVAS_HEIGHT = CANVAS_SIZE * 2;
|
|
|
|
export default function createScene(state, canvas) {
|
|
const scene = new THREE.Scene();
|
|
|
|
// Position and zoom of the camera should be stored in constants
|
|
const camera = new THREE.PerspectiveCamera(50, 1, 1, 10000);
|
|
camera.position.set(0, 200, 150);
|
|
camera.lookAt(new THREE.Vector3(0, 0, 0));
|
|
|
|
scene.add(camera);
|
|
|
|
const shapesManager = new ShapesManager({ toonShader: hasExtensionsFor.toonShaderThumbnail });
|
|
shapesManager.update(state);
|
|
|
|
scene.add(shapesManager);
|
|
|
|
const geometry = new THREE.PlaneGeometry(CANVAS_WIDTH, CANVAS_HEIGHT);
|
|
const material = new THREE.MeshBasicMaterial({
|
|
color: 0xcccccc,
|
|
side: THREE.DoubleSide,
|
|
transparent: true,
|
|
opacity: 0.5
|
|
});
|
|
const plane = new THREE.Mesh(geometry, material);
|
|
plane.rotation.x = Math.PI / 2;
|
|
plane.position.y = -0.1;
|
|
plane.name = 'bed-plane';
|
|
scene.add(plane);
|
|
|
|
const renderer = new THREE.WebGLRenderer({ preserveDrawingBuffer: true, canvas });
|
|
|
|
const directionalLight = new THREE.PointLight(0xffffff, 0.6);
|
|
camera.add(directionalLight);
|
|
|
|
const light = new THREE.AmbientLight(0x505050);
|
|
scene.add(light);
|
|
|
|
let render;
|
|
let setSizeRenderer;
|
|
if (hasExtensionsFor.toonShaderThumbnail) {
|
|
const renderChain = new ToonShaderRenderChain(renderer, scene, camera, {
|
|
plane,
|
|
UI: new THREE.Object3D(),
|
|
shapes: shapesManager,
|
|
boundingBox: new THREE.Object3D()
|
|
});
|
|
setSizeRenderer = renderChain.setSize.bind(renderChain);
|
|
render = renderChain.render.bind(renderChain);
|
|
} else {
|
|
renderer.setClearColor(0xffffff);
|
|
|
|
setSizeRenderer = renderer.setSize.bind(renderer);
|
|
render = renderer.render.bind(renderer, scene, camera);
|
|
}
|
|
|
|
const setSize = (width, height, pixelRatio) => {
|
|
setSizeRenderer(width, height, pixelRatio);
|
|
|
|
camera.aspect = width / height;
|
|
camera.updateProjectionMatrix();
|
|
};
|
|
|
|
return { scene, camera, renderer, render, setSize };
|
|
}
|