three.js s使用Shape对象和轮廓填充ShapeGeometry渲染线框

最新推荐文章于 2024-06-05 15:10:42 发布

汉武大帝·

最新推荐文章于 2024-06-05 15:10:42 发布

阅读量985

点赞数

分类专栏： three.js 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/yinge0508/article/details/123046471

版权

three.js 专栏收录该内容

112 篇文章 11 订阅

订阅专栏

效果：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Shape对象和轮廓填充ShapeGeometry</title>
  <script src="../three.js"></script>
  <script src="../OrbitControls.js"></script>
</head>
<body>
  <script>
    // 1,创建场景
    var scene = new THREE.Scene();
    // 2,创建形状模型
    // 2.1,创建点
    // 2.2 创建形状轨迹
    var r = 150;
    var shape = new THREE.Shape();
    shape.absarc(0,0,50,-Math.PI/2,Math.PI/2);
    shape.lineTo(-r,50);
    shape.arc(0,-50,50,Math.PI/2,3*Math.PI/2);
    shape.lineTo(0,-50);
    // 2.3 创建形状模型: 参数3000 是表示细分数，值小了或者没有，线框没有闭合。
    var geometry = new THREE.ShapeGeometry(shape,3000);
    // geometry.center();//几何体居中
    // geometry.scale(30,30,30);//几何体缩放
    var material = new THREE.MeshPhongMaterial({color: 0x55aaff,wireframe: false});
    // var material = new THREE.MeshPhongMaterial({
    // color: 0x0000ff,
    // side: THREE.DoubleSide //两面可见
    // }); //材质对象
    var mesh = new THREE.Line(geometry, material); //网格模型对象
    scene.add(mesh);
    // 3,创建环境光对象
    var ambient = new THREE.AmbientLight(0xffffff);
    scene.add(ambient);
    // 4,创建相机对象
    var width = window.innerWidth;
    var height = window.innerHeight;
    var k = width / height;
    var s = 200;
    var camera = new THREE.OrthographicCamera(-s*k,s*k,s,-s,-1000,1000);
    camera.position.set(200,300,200);
    camera.lookAt(scene.position);
    // 5,创建渲染器对象
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(width,height);
    document.body.appendChild(renderer.domElement);
    function render(){
      renderer.render(scene,camera);
    }
    var axes = new THREE.AxesHelper(500);
    scene.add(axes);
    var controls = new THREE.OrbitControls(camera,renderer.domElement);
    controls.addEventListener('change',render);

    render();
    
  </script>
  
</body>
</html>

汉武大帝·

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
three.js s使用Shape对象和轮廓填充ShapeGeometry渲染线框

效果：代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&g
复制链接

扫一扫