10 examples of 'cdn threejs' in JavaScript

312
function loadTHREE() {
313
  if (window.THREE) return Promise.resolve(true);
314
315
  return new Promise(resolve => {
316
    const script = document.createElement('script');
317
    script.src = "libs/three.min.js"
318
    document.head.append(script);
319
    script.onload = () => resolve(true);
320
    script.onerror = () => resolve(false);
321
  });
322
}

24
function loadThreeJS(){
25
	var sim = new altspace.utilities.Simulation();
26
	var cube = new THREE.Mesh(
27
		new THREE.BoxGeometry(1, 1, 1),
28
		new THREE.MeshBasicMaterial({color: 0x008800})
29
	);
30
	cube.position.set(-1,1,0);
31
	cube.addBehavior( new altspace.utilities.behaviors.HoverColor() );
32
	sim.scene.add(cube);
33
}

6
export function intoThree() {
7
8
    const canvas = document.querySelector('#three')! as HTMLCanvasElement
9
    var scene = new THREE.Scene();
10
    var camera = new THREE.PerspectiveCamera(75, canvas.clientWidth / canvas.clientHeight, 0.1, 1000);
11
    camera.position.z = 50;
12
13
    var renderer = new THREE.WebGLRenderer({
14
        canvas,
15
        antialias: true
16
    });
17
    renderer.setSize(canvas.clientWidth, canvas.clientHeight);
18
19
    const geom = new THREE.BoxBufferGeometry();
20
    const mat = new THREE.MeshBasicMaterial();
21
22
    const arraySize = 20;
23
    console.log(arraySize * arraySize * arraySize);
24
    const grid = 2;
25
    for (let i = 0; i < arraySize; i++) {
26
        const node = new THREE.Object3D();
27
        node.position.x = i * grid;
28
        scene.add(node);
29
        for (let j = 0; j < arraySize; j++) {
30
            const node2 = new THREE.Object3D();
31
            node2.position.y = j * grid;
32
            node.add(node2);
33
            for (let k = 0; k < arraySize; k++) {
34
35
                const testMesh = new THREE.Mesh(geom, mat);
36
                testMesh.position.z = k * grid;
37
                testMesh.frustumCulled = false;
38
                node2.add(testMesh);
39
            }
40
        }
41
    }
42
43
    var animate = function () {
44
        requestAnimationFrame(animate);
45
        if ((window as any).threeEnable) {
46
            scene.rotation.y += 0.01;
47
            renderer.render(scene, camera);
48
        }
49
    };
50
51
    animate();
52
53
}

29
function initThreeJS() {
30
  scene = new THREE.Scene();
31
32
  camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.1, 15 );
33
  camera.position.set(0,0,1.0);
34
35
  renderer = new THREE.WebGLRenderer();
36
  renderer.setSize( window.innerWidth, window.innerHeight );
37
  renderer.setClearColor(0xeebbbb);
38
  document.body.appendChild( renderer.domElement );
39
}

75
export function threeLoadSphereEnv(file, key) {
76
    threeResources[key] = new THREE.TextureLoader().load(file);
77
    threeResources[key].mapping = THREE.SphericalReflectionMapping;
78
}

25
function initTHREE() {
26
    mRenderer = new THREE.WebGLRenderer({antialias:false});
27
    mRenderer.setSize(window.innerWidth, window.innerHeight);
28
29
    mContainer = document.getElementById('three-container');
30
    mContainer.appendChild(mRenderer.domElement);
31
32
    mCamera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 10000);
33
    mCamera.position.z = 800;
34
35
    mScene = new THREE.Scene();
36
37
    var light;
38
39
    light = new THREE.DirectionalLight(0xAD2959, 1);
40
    light.position.set(0, 1, 0);
41
    mScene.add(light);
42
43
    light = new THREE.DirectionalLight(0x095062, 1);
44
    light.position.set(0, -1, 0);
45
    mScene.add(light);
46
}

21
function initThree() {
22
    width = document.getElementById('canvas-frame').clientWidth;
23
    height = document.getElementById('canvas-frame').clientHeight;
24
    renderer = new THREE.WebGLRenderer({
25
        antialias: true
26
    });
27
    renderer.setSize(width, height);
28
    document.getElementById('canvas-frame').appendChild(renderer.domElement);//给cavans附加子对象
29
    renderer.setClearColor(0xFFFFFF, 1.0);
30
}

139
function setupThreejs() {
140
  camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.1, 1000 );
141
  camera.position.z = 5;
142
  camera.position.y = 3;
143
  camera.rotation.x = -0.5;
144
  camera.aspect = canvas.clientWidth / canvas.clientHeight;
145
146
  controls = new OrbitControls( camera, canvas );
147
  controls.autoRotate = false;
148
  controls.enableZoom = true;
149
  controls.maxPolarAngle = Math.PI/2-0.01;
150
151
  renderer = new THREE.WebGLRenderer({ antialias: true, canvas: canvas });
152
  renderer.setSize( canvas.clientWidth, canvas.clientHeight );
153
  renderer.setClearColor( FOGCOLOR );
154
  renderer.shadowMap.soft = true;
155
  renderer.shadowMap.enabled = true;
156
  renderer.shadowMap.type = THREE.PCFSoftShadowMap; // default THREE.PCFShadowMap
157
158
}

27
function initTHREE() {
28
  mRenderer = new THREE.WebGLRenderer({antialias: false});
29
  mRenderer.setSize(window.innerWidth, window.innerHeight);
30
31
  mContainer = document.getElementById('three-container');
32
  mContainer.appendChild(mRenderer.domElement);
33
34
  mCamera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 10000);
35
  mCamera.position.set(0, 600, 600);
36
37
  mScene = new THREE.Scene();
38
39
  mScene.add(new THREE.GridHelper(2000, 100));
40
41
  var light;
42
43
  light = new THREE.PointLight(0xffffff, 1, 0, 2);
44
  light.position.set(0, 400, 0);
45
  mScene.add(light);
46
}

41
function loadModels( scene ) {
42
43
  const loader = new THREE.GLTFLoader();
44
45
  const onError = ( errorMessage ) => { console.log( errorMessage ); };
46
47
  loader.load( 'models/Horse.glb', gltf => onLoad( gltf, scene ), null, onError );
48
49
}