Three.js 画3维图形Demo

  • h0_825296
    了解作者
  • 365.6MB
    文件大小
  • zip
    文件格式
  • 0
    收藏次数
  • VIP专享
    资源类型
  • 0
    下载次数
  • 2022-06-03 09:41
    上传日期
Three.js 画图形、线条、文案、视频等等,IDEA导入即可使用
threejsdemo.zip
  • threejsdemo
  • src
  • img
  • logo.png
    8.8KB
  • test.gif
    574.2KB
  • vo.mp4
    358.3MB
  • index.html
    16.9KB
  • js
  • font
  • YaHei.json
    26.4MB
  • optimer_regular.typeface.json
    108.1KB
内容介绍
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>3D模型研究</title> <style> body { margin: 0; overflow: hidden; } </style> <!--three.js功能js文件--> <script src="http://www.yanhuangxueyuan.com/3D/example/three.js"></script> <!--鼠标控制3D模型用到的文件--> <script src="http://www.yanhuangxueyuan.com/3D/example/OrbitControls.js"></script> </head> <body> <!--<canvas id="canvas" style="display: none;"></canvas>--> <video id="video" autoplay loop muted style="display: none;"> <source src="./img/vo.mp4"> </video> <script> //**************************绘制视频***************************************** function drawVideo() { var planeGeometry = new THREE.PlaneGeometry(200, 100); var material = new THREE.MeshPhongMaterial(); material.side = THREE.DoubleSide; var mesh = new THREE.Mesh(planeGeometry, material); mesh.position.set(0, 100, 400) mesh.rotateY(Math.PI / 2); //旋转网格模型 scene.add(mesh); var video = document.getElementById('video'); var texture = new THREE.VideoTexture(video); texture.minFilter = THREE.LinearFilter; texture.magFilter = THREE.LinearFilter; texture.format = THREE.RGBFormat; material.map = texture; // 创建video对象 // var video = document.createElement('video'); // video.src = "./img/vo.mp4"; // 设置视频地址 // video.autoplay = "autoplay"; //要设置播放 // // video对象作为VideoTexture参数创建纹理对象 // var texture5 = new THREE.VideoTexture(video) // var geometry8 = new THREE.PlaneGeometry(200, 140); //矩形平面 // var material9 = new THREE.MeshPhongMaterial({ // map: texture5, // 设置纹理贴图 // }); //材质对象Material // var mesh10 = new THREE.Mesh(geometry8, material9); //网格模型对象Mesh // mesh10.position.set(200, 150, 0) // scene.add(mesh10); //网格模型添加到场景中 } //**************************绘制png图片***************************************** function drawPng(){ var texture= THREE.ImageUtils.loadTexture("./img/logo.png", null, function(t) {}); // 基础Basic网格材质,不受光照影响 Phong网格材质受光照影响 var material11= new THREE.MeshBasicMaterial({ //map:texture,//设置颜色纹理贴图 map: texture, transparent: true, side:THREE.DoubleSide }) var geometry11 = new THREE.PlaneGeometry(216, 88) var rect1 = new THREE.Mesh(geometry11, material11) rect1.rotateY(Math.PI / 2); //旋转网格模型 rect1.position.set(0, 70, 105) scene.add(rect1); } //**************************添加文字***************************************** function drawText(){ var loader = new THREE.FontLoader(); loader.load( './font/YaHei.json', function ( font ) { var geometry = new THREE.TextGeometry('深圳市乐其网络科技有限公司', { font: font, size: 10, height: 0, bevelThickness: 1, bevelSize: 1, bevelSegments: 1, curveSegments: 50, steps: 1 }); var fontMaterial = new THREE.MeshLambertMaterial({ color: 0x808080 }); var fontModel = new THREE.Mesh(geometry, fontMaterial); fontModel.translateX(11); fontModel.translateY(15); fontModel.translateZ(180); fontModel.rotateY(Math.PI / 2); //旋转网格模型 scene.add(fontModel); }); } //**************************画曲线***************************************** function drawStraightline(){ geometry = new THREE.Geometry(); geometry.vertices.push( new THREE.Vector3(0, 150, 0), new THREE.Vector3(0, 150, 200) ); geometry.colors.push( new THREE.Color( 0x444444 ), new THREE.Color( 0xFF0000 ) ) material = new THREE.LineBasicMaterial({ vertexColors: true }); var line = new THREE.Line(geometry, material); scene.add(line); } //**************************画圆***************************************** function drawCircle(){ // 创建多段线条的顶点数据 var p2 = new THREE.Vector3(0, 200, 50); var p3 = new THREE.Vector3(0, 250, 100); //var p4 = new THREE.Vector3(0, 200, 150); var p5 = new THREE.Vector3(0, 250, 0); //var p6 = new THREE.Vector3(0, 250, 200); //var p7 = new THREE.Vector3(0, 200, 250); //var p8 = new THREE.Vector3(0, 250, 300); var p9 = new THREE.Vector3(0, 200, 350); // 创建线条一:直线 // 重建线条2:三维样条曲线 var curve = new THREE.CatmullRomCurve3([p5,p2, p3,p9]); // 创建线条3:直线 var CurvePath = new THREE.CurvePath();// 创建CurvePath对象 CurvePath.curves.push(curve);// 插入多段线条 //通过多段曲线路径创建生成管道 //通过多段曲线路径创建生成管道,CCurvePath:管道路径 //扫描路径,基本类是Curve的路径构造函数 //路径方向细分数,默认64 //管道半径,默认1 // 管道圆弧细分数,默认8 // Boolean值,管道是否闭合 var geometry2 = new THREE.TubeGeometry(CurvePath, 500, 0.5, 8, false); var material = new THREE.MeshBasicMaterial( { color: 0xFF1493 } ); var mesh1 = new THREE.Mesh( geometry2, material ); scene.add(mesh1); } </script> <script> /** * 创建场景对象Scene */ var scene = new THREE.Scene(); //**************************形状***************************************** //创建一个球体几何对象 //var geometry = new THREE.SphereGeometry(60, 40, 40); // 圆柱 参数:圆柱面顶部、底部直径50,50 高度100 圆周分段数 //var geometry = new THREE.CylinderGeometry( 50, 50, 100, 25 ); //创建一个立方体几何对象Geometry var geometry1 = new THREE.BoxGeometry(20, 20, 50); // 正八面体 //var geometry1 = new THREE.OctahedronGeometry(50); // 正十二面体 //var geometry2 = new THREE.DodecahedronGeometry(50); // 正二十面体 //var geometry3 = new THREE.IcosahedronGeometry(50); //材质对象Material var material1 = new THREE.MeshLambertMaterial({ color: 0x7FFF00, //16进制颜色,0x开头 opacity:0.3,//透明度数值 transparent:false//开启透明度 }); // var material2 = new THREE.MeshLambertMaterial({ // color: 0x7FFF00, //16进制颜色,0x开头 // specular:0x4488ee, // shininess:12 // }); // material1.wireframe = true;//将几何图形渲染为线框。 默认值为false var mesh1 = new THREE.Mesh(geometry1, material1); //网格模型对象Mesh mesh1.translateZ(100); scene.add(mesh1); //网格模型添加到场景中 var uuid1 = mesh1.uuid; //添加文字 drawText(); //绘制png图片 drawPng(); //画直线 drawStraightline(); //画圆 drawCircle(); //视频 drawVideo(); //**************************添加文字2(画图方式)***************************************** //用canvas生成图片 // var canvas = document.getElementById('canvas') // var ctx = canvas.getContext('2d') // canvas.width = 300 // ca
评论
    相关推荐
    • idea-settings
      idea-settings
    • idea 高清教程
      目前最新的IDEA高清教程,比网上其他地方的版本全,也更清晰!
    • idea
      idea
    • idea汉化包
      idea汉化包,98%汉化。运行及其稳定。目前支持idea14,15,16,17等版本。极少部分由于不确定具体功能,没有汉化,后续有的话会更新。汉化方法和jar包在压缩文件中。汉化不易,尊重劳动成果,拒绝盗用,支持正版。谢谢
    • IDEA使用指南
      IDEA使用指南,欢迎小伙伴前来。 IDEA使用指南,欢迎小伙伴前来。 IDEA使用指南,欢迎小伙伴前来。 IDEA使用指南,欢迎小伙伴前来。
    • idea汉化包
      IntelliJidea汉化包------------------------------------------------------------------------------------------------------------
    • jr-ide-idea.rar
      jr-ide-idea.rar
    • intellj idea
      intellj
    • idea
      idea
    • jr-ide-idea-6.0.2-idea-13-14.zip
      jr-ide-idea-6.0.2-idea-13-14.zip