10 examples of 'cdn threejs' in JavaScript

Every line of 'cdn threejs' code snippets is scanned for vulnerabilities by our powerful machine learning engine that combs millions of open source libraries, ensuring your JavaScript code is secure.

All examples are scanned by Snyk Code

By copying the Snyk Code Snippets you agree to
312function 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}
24function 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}
6export 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}
29function 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}
75export function threeLoadSphereEnv(file, key) {
76 threeResources[key] = new THREE.TextureLoader().load(file);
77 threeResources[key].mapping = THREE.SphericalReflectionMapping;
78}
25function 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}
21function 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}
139function 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}
27function 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}
41function 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}

Related snippets