10 examples of 'threejs cdn' in JavaScript

Every line of 'threejs cdn' 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
this disclaimer
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}
Important

Use secure code every time

Secure your code as it's written. Use Snyk Code to scan source code in minutes – no build needed – and fix issues immediately. Enable Snyk Code

75export function threeLoadSphereEnv(file, key) {
76 threeResources[key] = new THREE.TextureLoader().load(file);
77 threeResources[key].mapping = THREE.SphericalReflectionMapping;
78}
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}
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}
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}
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}
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}
21export function threeLoadPostprocessingTextures() {
22 const areaImage = new Image();
23 const searchImage = new Image();
24 loaded = false;
25
26 manager.itemStart("smaa_areaImageDataURL");
27 manager.itemStart("smaa_searchImageDataURL");
28 areaImage.addEventListener("load", function () {
29 manager.itemEnd("smaa_areaImageDataURL");
30 });
31 areaImage.src = post.SMAAEffect.areaImageDataURL;
32
33 searchImage.addEventListener("load", function () {
34 manager.itemEnd("smaa_searchImageDataURL");
35 });
36 searchImage.src = post.SMAAEffect.searchImageDataURL;
37
38 threeResources["smaa_search"] = searchImage;
39 threeResources["smaa_area"] = areaImage;
40}

Related snippets