方形地毯 抽象几何图案 3D贴图
0 45

0 45
() 全部评论
所有回复 (0)

热门

最新

  • LapBin(ThreeJS) 52 0 1 发布
  • 在线开发 65 0 1 发布
  • Web3D编程 threejs 19 0 1 发布

    例子在线预览

    效果图


    全部代码<!DOCTYPE html> <html lang="en">     <head>         <title>three.js webgl - box selection</title>         <meta charset="utf-8">         <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">         <link type="text/css" rel="stylesheet" href="main.css">         <style>             body {                 background-color: #f0f0f0;                 color: #000;             }             a {                 color: #08e;             }             .selectBox {                 border: 1px solid #55aaff;                 background-color: rgba(75, 160, 255, 0.3);                 position: fixed;             }         </style>     </head>     <body>         <div id="info">             <a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - box selection         </div>         <script type="module">             import * as THREE from '../build/three.module.js';             import Stats from './jsm/libs/stats.module.js';             import { SelectionBox } from './jsm/interactive/SelectionBox.js';             import { SelectionHelper } from './jsm/interactive/SelectionHelper.js';             var container, stats;             var camera, scene, renderer;             init();             animate();             function init() {                 container = document.createElement( 'div' );                 document.body.appendChild( container );                 camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 5000 );                 camera.position.z = 1000;                 scene = new THREE.Scene();                 scene.background = new THREE.Color( 0xf0f0f0 );                 scene.add( new THREE.AmbientLight( 0x505050 ) );                 var light = new THREE.SpotLight( 0xffffff, 1.5 );                 light.position.set( 0, 500, 2000 );                 light.angle = Math.PI / 9;                 light.castShadow = true;                 light.shadow.camera.near = 1000;                 light.shadow.camera.far = 4000;                 light.shadow.mapSize.width = 1024;                 light.shadow.mapSize.height = 1024;                 scene.add( light );                 var geometry = new THREE.BoxBufferGeometry( 20, 20, 20 );                 for ( var i = 0; i < 200; i ++ ) {                     var object = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial( { color: Math.random() * 0xffffff } ) );                     object.position.x = Math.random() * 1600 - 800;                     object.position.y = Math.random() * 900 - 450;                     object.position.z = Math.random() * 900 - 500;                     object.rotation.x = Math.random() * 2 * Math.PI;                     object.rotation.y = Math.random() * 2 * Math.PI;                     object.rotation.z = Math.random() * 2 * Math.PI;                     object.scale.x = Math.random() * 2 + 1;                     object.scale.y = Math.random() * 2 + 1;                     object.scale.z = Math.random() * 2 + 1;                     object.castShadow = true;                     object.receiveShadow = true;                     scene.add( object );                 }                 renderer = new THREE.WebGLRenderer( { antialias: true } );                 renderer.setPixelRatio( window.devicePixelRatio );                 renderer.setSize( window.innerWidth, window.innerHeight );                 renderer.shadowMap.enabled = true;                 renderer.shadowMap.type = THREE.PCFShadowMap;                 container.appendChild( renderer.domElement );                 stats = new Stats();                 container.appendChild( stats.dom );                 window.addEventListener( 'resize', onWindowResize, false );             }             function onWindowResize() {                 camera.aspect = window.innerWidth / window.innerHeight;                 camera.updateProjectionMatrix();                 renderer.setSize( window.innerWidth, window.innerHeight );             }             //             function animate() {                 requestAnimationFrame( animate );                 render();                 stats.update();             }             function render() {                 renderer.render( scene, camera );             }             var selectionBox = new SelectionBox( camera, scene );             var helper = new SelectionHelper( selectionBox, renderer, 'selectBox' );             document.addEventListener( 'mousedown', function ( event ) {                 for ( var item of selectionBox.collection ) {                     item.material.emissive.set( 0x000000 );                 }                 selectionBox.startPoint.set(                     ( event.clientX / window.innerWidth ) * 2 - 1,                     - ( event.clientY / window.innerHeight ) * 2 + 1,                     0.5 );             } );             document.addEventListener( 'mousemove', function ( event ) {                 if ( helper.isDown ) {                     for ( var i = 0; i < selectionBox.collection.length; i ++ ) {                         selectionBox.collection[ i ].material.emissive.set( 0x000000 );                     }                     selectionBox.endPoint.set(                         ( event.clientX / window.innerWidth ) * 2 - 1,                         - ( event.clientY / window.innerHeight ) * 2 + 1,                         0.5 );                     var allSelected = selectionBox.select();                     for ( var i = 0; i < allSelected.length; i ++ ) {                         allSelected[ i ].material.emissive.set( 0xffffff );                     }                 }             } );             document.addEventListener( 'mouseup', function ( event ) {                 selectionBox.endPoint.set(                     ( event.clientX / window.innerWidth ) * 2 - 1,                     - ( event.clientY / window.innerHeight ) * 2 + 1,                     0.5 );                 var allSelected = selectionBox.select();                 for ( var i = 0; i < allSelected.length; i ++ ) {                     allSelected[ i ].material.emissive.set( 0xffffff );                 }             } );         </script>     </body> </html>
  • Web3D编程 27 0 1 发布

    在线预览地址

    效果图


    右上角控件

    rotationSpeed:旋转速度 

    addCube:增加立方体

    removeCube:移除最后一个添加到场景中的立方体

    outputObjects:浏览器控制台中显示当前场景中所有对象

    numberOfObjects:场景中的所有对象的数量

    添加雾化效果

    白色雾化效果(0xffffff)。后面两个参数是用来调节雾的显示,0.015是near(近处)值,100是far(远处)属性的值。

    scene.fog=new THREE.FogExp2( 0xffffff, 0.015 );  scene.fog = new THREE.Fog(0xffffff, 0.015, 100);

    全部代码<!DOCTYPE html> <html> <head> <title>构建threejs 应用的基本组件添加雾化效果</title> <script type="text/javascript" src="../libs/three.js"></script> <script type="text/javascript" src="../libs/stats.js"></script> <script type="text/javascript" src="../libs/dat.gui.js"></script> <style> body { margin: 0; overflow: hidden; } </style> </head> <body> <div id="Stats-output"> </div> <div id="LapBin-output"> </div> <script type="text/javascript"> // 加载所有内容后,我们将运行Three.js function init() { var stats = initStats(); // 创建一个场景,该场景将包含所有元素,例如对象、摄影机和灯光。 var scene = new THREE.Scene(); //白色雾化效果(0xffffff)。后面两个参数是用来调节雾的显示,0.015是near(近处)值,100是far(远处)属性的值。 //scene.fog=new THREE.FogExp2( 0xffffff, 0.015 ); scene.fog = new THREE.Fog(0xffffff, 0.015, 100); // 创建一个摄像头,它定义了我们要看的范围。 var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000); // 创建渲染并设置大小 var renderer = new THREE.WebGLRenderer(); renderer.setClearColor(new THREE.Color(0xEEEEEE, 1.0)); renderer.setSize(window.innerWidth, window.innerHeight); renderer.shadowMapEnabled = true; // 创建平面 var planeGeometry = new THREE.PlaneGeometry(60, 40, 1, 1); var planeMaterial = new THREE.MeshLambertMaterial({color: 0xffffff}); var plane = new THREE.Mesh(planeGeometry, planeMaterial); plane.receiveShadow = true; // 旋转并定位平面 plane.rotation.x = -0.5 * Math.PI; plane.position.x = 0; plane.position.y = 0; plane.position.z = 0; // 将平面添加到场景中 scene.add(plane); // 将摄影机定位并指向场景的中心 camera.position.x = -30; camera.position.y = 40; camera.position.z = 30; camera.lookAt(scene.position); // 添加微环境光 var ambientLight = new THREE.AmbientLight(0x0c0c0c); scene.add(ambientLight); // 为阴影添加聚光灯 var spotLight = new THREE.SpotLight(0xffffff); spotLight.position.set(-40, 60, -10); spotLight.castShadow = true; scene.add(spotLight); // 将渲染器的输出添加到html元素 document.getElementById("LapBin-output").appendChild(renderer.domElement); // 调用render()方法 var step = 0; var controls = new function () { this.rotationSpeed = 0.02; this.numberOfObjects = scene.children.length; this.removeCube = function () { var allChildren = scene.children; var lastObject = allChildren[allChildren.length - 1]; if (lastObject instanceof THREE.Mesh) { scene.remove(lastObject); this.numberOfObjects = scene.children.length; } }; this.addCube = function () { var cubeSize = Math.ceil((Math.random() * 3)); var cubeGeometry = new THREE.BoxGeometry(cubeSize, cubeSize, cubeSize); var cubeMaterial = new THREE.MeshLambertMaterial({color: Math.random() * 0xffffff}); var cube = new THREE.Mesh(cubeGeometry, cubeMaterial); cube.castShadow = true; // 围绕立方体的轴旋转立方体 cube.position.x = -30 + Math.round((Math.random() * planeGeometry.parameters.width)); cube.position.y = Math.round((Math.random() * 5)); cube.position.z = -20 + Math.round((Math.random() * planeGeometry.parameters.height)); // 添加立方体到场景 scene.add(cube); this.numberOfObjects = scene.children.length; }; this.outputObjects = function () { console.log(scene.children); } }; //右上角控件 var gui = new dat.GUI(); gui.add(controls, 'rotationSpeed', 0, 0.5); gui.add(controls, 'addCube'); gui.add(controls, 'removeCube'); gui.add(controls, 'outputObjects'); gui.add(controls, 'numberOfObjects').listen(); render(); function render() { stats.update(); // 围绕立方体的轴旋转立方体 scene.traverse(function (e) { if (e instanceof THREE.Mesh && e != plane) { e.rotation.x += controls.rotationSpeed; e.rotation.y += controls.rotationSpeed; e.rotation.z += controls.rotationSpeed; } }); // 使用requestAnimationFrame渲染 requestAnimationFrame(render); renderer.render(scene, camera); } function initStats() { var stats = new Stats(); stats.setMode(0); // 0: fps, 1: ms // 定位左上角 stats.domElement.style.position = 'absolute'; stats.domElement.style.left = '0px'; stats.domElement.style.top = '0px'; document.getElementById("Stats-output").appendChild(stats.domElement); return stats; } } window.onload = init </script> </body> </html>
  • LapBin(ThreeJS) 51 0 1 发布
  • Web3D编程 27 0 1 发布

    在线预览地址

    效果预览图


    右上角控件

    rotationSpeed:旋转速度 

    addCube:增加立方体

    removeCube:移除最后一个添加到场景中的立方体

    outputObjects:浏览器控制台中显示当前场景中所有对象

    numberOfObjects:场景中的所有对象的数量

    全部代码<!DOCTYPE html> <html> <head> <title>构建threejs 应用的基本组件</title> <script type="text/javascript" src="../libs/three.js"></script> <script type="text/javascript" src="../libs/stats.js"></script> <script type="text/javascript" src="../libs/dat.gui.js"></script> <style> body { margin: 0; overflow: hidden; } </style> </head> <body> <div id="Stats-output"> </div> <div id="LapBin-output"> </div> <script type="text/javascript"> // 加载所有内容后,我们将运行Three.js function init() { var stats = initStats(); // 创建一个场景,该场景将包含所有元素,例如对象、摄影机和灯光。 var scene = new THREE.Scene(); // 创建一个摄像头,它定义了我们要看的范围。 var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000); scene.add(camera); // 创建渲染并设置大小 var renderer = new THREE.WebGLRenderer(); renderer.setClearColor(new THREE.Color(0xEEEEEE, 1.0)); renderer.setSize(window.innerWidth, window.innerHeight); renderer.shadowMapEnabled = true; // 创建平面 var planeGeometry = new THREE.PlaneGeometry(60, 40, 1, 1); var planeMaterial = new THREE.MeshLambertMaterial({color: 0xffffff}); var plane = new THREE.Mesh(planeGeometry, planeMaterial); plane.receiveShadow = true; // 旋转并定位平面 plane.rotation.x = -0.5 * Math.PI; plane.position.x = 0; plane.position.y = 0; plane.position.z = 0; // 将平面添加到场景中 scene.add(plane); // 将摄影机定位并指向场景的中心 camera.position.x = -30; camera.position.y = 40; camera.position.z = 30; camera.lookAt(scene.position); // 添加微环境光 var ambientLight = new THREE.AmbientLight(0x0c0c0c); scene.add(ambientLight); // 为阴影添加聚光灯 var spotLight = new THREE.SpotLight(0xffffff); spotLight.position.set(-40, 60, -10); spotLight.castShadow = true; scene.add(spotLight); // 将渲染器的输出添加到html元素 document.getElementById("LapBin-output").appendChild(renderer.domElement); // call the render function var step = 0; var controls = new function () { this.rotationSpeed = 0.02; this.numberOfObjects = scene.children.length; this.removeCube = function () { //移除最后一个添加到场景中的立方体 var allChildren = scene.children; var lastObject = allChildren[allChildren.length - 1]; if (lastObject instanceof THREE.Mesh) { scene.remove(lastObject); this.numberOfObjects = scene.children.length; } }; this.addCube = function () { //点击右上角addCube控件按钮,一个新的THREE.BoxGeometry被创建 //长宽高都是一个从1-3之间的随机数 //颜色也是随机 var cubeSize = Math.ceil((Math.random() * 3)); var cubeGeometry = new THREE.BoxGeometry(cubeSize, cubeSize, cubeSize); var cubeMaterial = new THREE.MeshLambertMaterial({color: Math.random() * 0xffffff}); var cube = new THREE.Mesh(cubeGeometry, cubeMaterial); cube.castShadow = true; cube.name = "cube-" + scene.children.length; // 围绕立方体的轴旋转立方体 cube.position.x = -30 + Math.round((Math.random() * planeGeometry.parameters.width)); cube.position.y = Math.round((Math.random() * 5)); cube.position.z = -20 + Math.round((Math.random() * planeGeometry.parameters.height)); // 添加立方体到场景 scene.add(cube); this.numberOfObjects = scene.children.length; }; this.outputObjects = function () { console.log(scene.children); } }; var gui = new dat.GUI(); gui.add(controls, 'rotationSpeed', 0, 0.5); gui.add(controls, 'addCube'); gui.add(controls, 'removeCube'); gui.add(controls, 'outputObjects'); gui.add(controls, 'numberOfObjects').listen(); render(); function render() { stats.update(); // 绕轴旋转立方体 scene.traverse(function (e) { if (e instanceof THREE.Mesh && e != plane) { e.rotation.x += controls.rotationSpeed; e.rotation.y += controls.rotationSpeed; e.rotation.z += controls.rotationSpeed; } }); // 渲染使用 requestAnimationFrame requestAnimationFrame(render); renderer.render(scene, camera); } function initStats() { var stats = new Stats(); stats.setMode(0); // 0: fps, 1: ms // 定位左上 stats.domElement.style.position = 'absolute'; stats.domElement.style.left = '0px'; stats.domElement.style.top = '0px'; document.getElementById("Stats-output").appendChild(stats.domElement); return stats; } } window.onload = init </script> </body> </html>
  • LapBin(ThreeJS) 59 0 1 发布
  • 插件下载 202 0 1 发布

    MultiScatter能干啥?

    可种树、人、阳伞、行道树、路灯、辉光片,绿篱、灌木、围栏,景观,室内座椅,只有想不到没有散步不了。

    MultiScatter是一款能够在3dsMax上运行的非常强大的3D场景渲染插件,

    该插件目前支持最新版本的3DS MAX软件,拥有着非常出色的渲染技术,具有渲染质量高、

    渲染速度快等优势,有了它,大家就可以非常轻松的创建各种各样的3D场景


    https://pan.baidu.com/share/init?surl=j5e00pMzQqj1mWl7hdQoow 提取码:5d1c